/* 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 '-'
(54,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(55,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 '-'
(61,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(62,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 '-'
(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 '-'
(70,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(71,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 '-'
(77,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(78,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 '-'
(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 '-'
(90,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(91,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 '-'
(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 '-'
(101,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(102,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 '-'
(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 '-'
(120,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(121,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 '-'
(127,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(128,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 '-'
(134,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(135,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 '-'
(141,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(142,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 '-'
(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 '-'
(151,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(152,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 '-'
(158,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(159,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(160,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 '-'
(168,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(171,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(172,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(176,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-base'
(177,22): run-time error CSS1039: Token not allowed after unary operator: '-of-page-bg'
(178,17): run-time error CSS1039: Token not allowed after unary operator: '-of-text'
(187,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(188,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(189,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(190,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(191,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(199,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(200,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(201,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(202,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(211,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(212,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(213,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(214,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(223,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(224,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(225,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(226,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(235,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(236,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(237,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(238,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(247,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(248,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(249,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(250,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(270,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-base'
(271,22): run-time error CSS1039: Token not allowed after unary operator: '-of-page-bg'
(272,17): run-time error CSS1039: Token not allowed after unary operator: '-of-text'
(285,21): run-time error CSS1039: Token not allowed after unary operator: '-of-page-max-width'
(287,19): run-time error CSS1039: Token not allowed after unary operator: '-of-layout-margin'
(303,40): run-time error CSS1039: Token not allowed after unary operator: '-of-layout-columns'
(304,15): run-time error CSS1039: Token not allowed after unary operator: '-of-layout-gap'
(317,22): run-time error CSS1039: Token not allowed after unary operator: '-of-surface-bg'
(318,28): run-time error CSS1039: Token not allowed after unary operator: '-of-border-muted'
(319,25): run-time error CSS1039: Token not allowed after unary operator: '-of-radius-lg'
(325,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-weight-bold'
(336,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-weight-bold'
(360,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(361,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(362,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(363,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(364,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(365,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(366,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(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 '-'
(387,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(388,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(389,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(394,30): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(394,74): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(397,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-page-bg'
(405,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(406,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-surface'
(413,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(416,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(421,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(427,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-content-x'
(443,27): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-content-width'
(450,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(451,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(460,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(461,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(482,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(483,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(490,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(491,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(501,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(502,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(508,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-border'
(509,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-list-item-radius'
(515,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-border'
(521,24): run-time error CSS1039: Token not allowed after unary operator: '-of-border-focus'
(523,22): run-time error CSS1039: Token not allowed after unary operator: '-of-focus-ring'
(531,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(532,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(554,15): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-action-gap'
(557,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-action-height'
(558,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-action-padding-x'
(559,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(560,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(567,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(568,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-radius-pill'
(576,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(577,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(581,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(583,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(588,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-chevron-size'
(589,18): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-chevron-size'
(590,20): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-chevron-size'
(625,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(628,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-radius-card'
(639,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(641,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-radius-pill'
(660,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(661,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(679,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(696,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(701,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(702,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(703,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-radius-pill'
(713,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(714,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(733,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-list-item-height'
(735,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(738,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-border-muted'
(739,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-list-item-radius'
(751,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(763,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(764,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-radius-pill'
(789,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(797,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-text-muted'
(798,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(949,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-radius-card'
(1071,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-list-item-height'
(1073,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(1074,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(1079,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-border-muted'
(1080,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-list-item-radius'
(1099,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-border'
(1106,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(1111,24): run-time error CSS1039: Token not allowed after unary operator: '-of-border-focus'
(1123,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(1124,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(1129,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-border'
(1130,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-list-item-radius'
(1136,24): run-time error CSS1039: Token not allowed after unary operator: '-of-border-focus'
(1138,22): run-time error CSS1039: Token not allowed after unary operator: '-of-focus-ring'
(1147,24): run-time error CSS1039: Token not allowed after unary operator: '-of-border-focus'
(1152,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-text-muted'
(1153,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(1162,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(1175,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-chevron-size'
(1176,18): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-chevron-size'
(1177,20): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-chevron-size'
(1187,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(1194,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-border-muted'
(1200,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(1211,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(1212,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(1218,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-border'
(1219,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-list-item-radius'
(1225,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-border'
(1230,24): run-time error CSS1039: Token not allowed after unary operator: '-of-border-focus'
(1232,22): run-time error CSS1039: Token not allowed after unary operator: '-of-focus-ring'
(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 '-'
(1254,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1255,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1256,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1318,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-action-height'
(1434,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1435,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1475,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(1561,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(1562,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(1618,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(1619,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(1620,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(1621,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(1656,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(1657,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(1658,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(1659,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(1679,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1696,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(1697,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(1738,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1773,24): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(1774,26): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(1775,22): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(1776,26): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(1782,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(1822,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1823,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1824,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1825,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1831,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1832,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1833,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1842,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1884,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2117,30): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(2117,80): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(2120,35): run-time error CSS1039: Token not allowed after unary operator: '-of-header-height'
(2120,68): run-time error CSS1039: Token not allowed after unary operator: '-of-layout-margin'
(2122,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-100'
(2134,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-white'
(2149,28): run-time error CSS1039: Token not allowed after unary operator: '-of-brand-logo-url'
(2162,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(2195,19): run-time error CSS1039: Token not allowed after unary operator: '-of-space-lg'
(2210,17): run-time error CSS1039: Token not allowed after unary operator: '-of-text-inverse'
(2211,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(2217,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(2237,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(2238,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(2239,21): run-time error CSS1039: Token not allowed after unary operator: '-of-typography-step-title-size'
(2241,23): run-time error CSS1039: Token not allowed after unary operator: '-of-typography-step-title-weight'
(2242,23): run-time error CSS1039: Token not allowed after unary operator: '-of-typography-step-title-line-height'
(2243,26): run-time error CSS1039: Token not allowed after unary operator: '-of-typography-step-title-letter-spacing'
(2250,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(2251,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(2252,21): run-time error CSS1039: Token not allowed after unary operator: '-of-typography-form-label-size'
(2254,23): run-time error CSS1039: Token not allowed after unary operator: '-of-typography-form-label-weight'
(2255,23): run-time error CSS1039: Token not allowed after unary operator: '-of-typography-form-label-line-height'
(2258,17): run-time error CSS1039: Token not allowed after unary operator: '-of-text'
(2259,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-base'
(2265,17): run-time error CSS1039: Token not allowed after unary operator: '-of-text-subtle'
(2266,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-base'
(2271,17): run-time error CSS1039: Token not allowed after unary operator: '-of-error'
(2275,22): run-time error CSS1039: Token not allowed after unary operator: '-of-input-height'
(2277,17): run-time error CSS1039: Token not allowed after unary operator: '-of-text'
(2278,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(2281,22): run-time error CSS1039: Token not allowed after unary operator: '-of-surface-bg'
(2282,28): run-time error CSS1039: Token not allowed after unary operator: '-of-border'
(2283,25): run-time error CSS1039: Token not allowed after unary operator: '-of-radius-md'
(2288,17): run-time error CSS1039: Token not allowed after unary operator: '-of-text-subtle'
(2292,24): run-time error CSS1039: Token not allowed after unary operator: '-of-border-focus'
(2294,22): run-time error CSS1039: Token not allowed after unary operator: '-of-focus-ring'
(2297,24): run-time error CSS1039: Token not allowed after unary operator: '-of-error'
(2311,17): run-time error CSS1039: Token not allowed after unary operator: '-of-text'
(2312,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(2314,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-weight-semibold'
(2315,22): run-time error CSS1039: Token not allowed after unary operator: '-of-surface-bg'
(2316,28): run-time error CSS1039: Token not allowed after unary operator: '-of-border'
(2317,25): run-time error CSS1039: Token not allowed after unary operator: '-of-radius-sm'
(2334,22): run-time error CSS1039: Token not allowed after unary operator: '-of-button-height'
(2336,17): run-time error CSS1039: Token not allowed after unary operator: '-of-action-secondary-text'
(2337,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(2340,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-weight-semibold'
(2343,22): run-time error CSS1039: Token not allowed after unary operator: '-of-action-secondary-bg'
(2344,28): run-time error CSS1039: Token not allowed after unary operator: '-of-action-secondary-border'
(2345,25): run-time error CSS1039: Token not allowed after unary operator: '-of-action-radius'
(2350,17): run-time error CSS1039: Token not allowed after unary operator: '-of-action-primary-text'
(2356,22): run-time error CSS1039: Token not allowed after unary operator: '-of-surface-bg'
(2370,22): run-time error CSS1039: Token not allowed after unary operator: '-of-surface-bg'
(2371,28): run-time error CSS1039: Token not allowed after unary operator: '-of-border'
(2372,25): run-time error CSS1039: Token not allowed after unary operator: '-of-radius-sm'
(2376,17): run-time error CSS1039: Token not allowed after unary operator: '-of-text-muted'
(2383,17): run-time error CSS1039: Token not allowed after unary operator: '-of-text'
(2487,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(2488,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(2499,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-size'
(2500,27): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-line-height'
(2501,30): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-letter-spacing'
(2527,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(2528,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(2538,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-size'
(2539,27): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-line-height'
(2540,30): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-letter-spacing'
(2555,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-content-x'
(2561,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(2571,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(2572,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(2581,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-size'
(2582,27): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-line-height'
(2583,30): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-letter-spacing'
(2587,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(2630,54): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-footer-height'
(2631,26): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-100'
(2639,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-panel-padding-x'
(2640,26): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-100'
(2658,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-panel-padding-x'
(2659,26): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-100'
(2663,31): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-search-content-width'
(2678,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-footer-height'
(2679,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-footer-height'
(2680,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-panel-padding-x'
(2690,54): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-footer-height'
(2723,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(2724,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(2726,26): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-white'
(2764,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-size'
(2765,27): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-line-height'
(2766,30): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-letter-spacing'
(2811,26): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(2812,22): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(2815,26): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-white'
(2863,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(2864,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(2865,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-size'
(2867,27): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-line-height'
(2868,30): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-letter-spacing'
(2895,26): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-100'
(2910,26): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(2911,22): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(2916,26): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(2931,31): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-search-content-width'
(3031,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(3032,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(3033,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(3034,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(3069,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(3070,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(3071,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(3072,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(3092,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3109,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(3110,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(3151,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3186,24): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(3187,26): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(3188,22): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(3189,26): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(3195,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(3235,34): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(3235,84): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(3241,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(3242,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(3243,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(3257,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-size'
(3258,27): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-line-height'
(3259,30): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-letter-spacing'
(3273,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(3274,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(3386,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(3387,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(3405,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3406,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3407,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3408,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3417,26): run-time error CSS1039: Token not allowed after unary operator: '-of-canonical-service-header-height'
(3418,22): run-time error CSS1039: Token not allowed after unary operator: '-of-canonical-service-header-height'
(3419,26): run-time error CSS1039: Token not allowed after unary operator: '-of-canonical-service-header-height'
(3442,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(3443,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(3444,25): run-time error CSS1039: Token not allowed after unary operator: '-of-canonical-service-title-size'
(3446,27): run-time error CSS1039: Token not allowed after unary operator: '-of-canonical-service-title-line-height'
(3447,30): run-time error CSS1039: Token not allowed after unary operator: '-of-canonical-service-title-letter-spacing'
(3481,49): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(3505,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-content-x'
(3506,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-content-x'
(3535,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-panel-padding-x'
(3536,29): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-panel-padding-x'
(3545,27): run-time error CSS1030: Expected identifier, found '#of-home-ctn'
(3545,136): run-time error CSS1031: Expected selector, found ')'
(3545,136): run-time error CSS1025: Expected comma or open brace, found ')'
(3552,27): run-time error CSS1030: Expected identifier, found '#of-home-ctn'
(3552,96): run-time error CSS1031: Expected selector, found ')'
(3552,96): run-time error CSS1025: Expected comma or open brace, found ')'
(3592,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(3646,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(4077,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-white'
(4079,32): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(4084,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-300'
(4085,24): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-300'
(4113,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-300'
(4114,24): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-300'
(4205,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(4826,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-white'
(4828,32): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(4833,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-300'
(4834,24): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-300'
(4862,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-300'
(4863,24): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-300'
(4929,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-list-item-height'
(4931,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(4934,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-border-muted'
(4935,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-list-item-radius'
(4943,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(4960,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(4965,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(5053,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(5054,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(5059,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-border-muted'
(5113,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(5114,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(5127,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(5219,35): run-time error CSS1030: Expected identifier, found ':'
(5219,43): run-time error CSS1031: Expected selector, found ')'
(5219,43): run-time error CSS1025: Expected comma or open brace, found ')'
(5368,43): run-time error CSS1030: Expected identifier, found ':'
(5368,51): run-time error CSS1031: Expected selector, found ')'
(5368,51): run-time error CSS1025: Expected comma or open brace, found ')'
(5379,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(5380,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(5387,17): run-time error CSS1039: Token not allowed after unary operator: '-of-text'
(5388,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(5443,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-300'
(5444,24): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-300'
(5528,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(5529,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(5547,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(5553,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(5554,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(5555,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-radius-pill'
(5584,45): run-time error CSS1030: Expected identifier, found ':'
(5584,54): run-time error CSS1031: Expected selector, found ')'
(5584,54): run-time error CSS1025: Expected comma or open brace, found ')'
(5596,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-text-muted'
(5597,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(5622,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(5628,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-border-muted'
(5633,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(5661,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(5662,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(5668,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-border'
(5669,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-list-item-radius'
(5675,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-border'
(5680,24): run-time error CSS1039: Token not allowed after unary operator: '-of-border-focus'
(5726,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(5727,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(5786,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(5834,26): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-100'
(5835,32): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-200'
(5843,28): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-misc-focused-state'
(5859,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-800'
(5860,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(5913,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-700'
(5914,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(5919,26): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-200'
(5928,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(6019,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-800'
(6020,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(6025,36): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-200'
(6046,26): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-400'
(6052,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-800'
(6193,26): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-100'
(6194,32): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-200'
(6202,28): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-misc-focused-state'
(6218,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-800'
(6219,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(6274,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-700'
(6275,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(6280,26): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-200'
(6289,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(6348,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(6349,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(6364,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-100'
(6365,28): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-200'
(6373,24): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-misc-focused-state'
(6389,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-800'
(6390,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(6445,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-700'
(6446,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(6451,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-200'
(6460,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(6709,24): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-200'
(6716,24): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-misc-focused-state'
(6723,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-600'
(6724,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-200'
(6736,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(6752,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-white'
(6754,32): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(6759,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-300'
(6778,28): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-white'
(6785,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-white'
(6786,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-300'
(6834,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-white'
(6835,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-300'
(6841,139): run-time error CSS1030: Expected identifier, found ':'
(6841,148): run-time error CSS1031: Expected selector, found ')'
(6841,148): run-time error CSS1025: Expected comma or open brace, found ')'
(6864,139): run-time error CSS1030: Expected identifier, found ':'
(6864,148): run-time error CSS1031: Expected selector, found ')'
(6864,148): run-time error CSS1025: Expected comma or open brace, found ')'
(6881,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-300'
(6888,139): run-time error CSS1030: Expected identifier, found ':'
(6888,148): run-time error CSS1031: Expected selector, found ')'
(6888,148): run-time error CSS1025: Expected comma or open brace, found ')'
(6900,139): run-time error CSS1030: Expected identifier, found ':'
(6900,148): run-time error CSS1031: Expected selector, found ')'
(6900,148): run-time error CSS1025: Expected comma or open brace, found ')'
(6906,139): run-time error CSS1030: Expected identifier, found ':'
(6906,148): run-time error CSS1031: Expected selector, found ')'
(6906,148): run-time error CSS1025: Expected comma or open brace, found ')'
(6941,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-100'
(6947,28): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-200'
(6954,24): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-misc-focused-state'
(6995,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-600'
(6996,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-200'
(7007,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(7018,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-300'
(7153,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(7155,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(7160,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(7161,22): run-time error CSS1039: Token not allowed after unary operator: '-of-surface-subtle-bg'
(7162,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(7176,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-100'
(7192,22): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(7194,17): run-time error CSS1039: Token not allowed after unary operator: '-of-text-inverse'
(7195,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(7201,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(7235,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(7236,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(7242,28): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(7264,34): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(7264,84): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(7278,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(7279,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(7281,26): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-white'
(7296,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(7327,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(7328,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(7329,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-size'
(7331,27): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-line-height'
(7332,30): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-letter-spacing'
(7343,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(7345,21): run-time error CSS1039: Token not allowed after unary operator: '-of-text-inverse'
(7346,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(7352,26): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(7396,34): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(7396,78): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(7404,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(7405,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(7420,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-size'
(7421,27): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-line-height'
(7422,30): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-letter-spacing'
(7426,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(7427,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(7441,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(7442,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(7446,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-size'
(7447,27): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-line-height'
(7448,30): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-letter-spacing'
(7452,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(7453,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(7463,26): run-time error CSS1039: Token not allowed after unary operator: '-of-map-bg'
(7469,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-footer-height'
(7472,26): run-time error CSS1039: Token not allowed after unary operator: '-of-map-bg'
(7477,27): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-footer-height'
(7482,32): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-results-list-width'
(7489,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-footer-height'
(7493,19): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-panel-padding-y'
(7494,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-panel-padding-x'
(7495,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-footer-height'
(7496,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-results-list-width'
(7502,27): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-footer-height'
(7513,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-footer-height'
(7521,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-panel-padding-x'
(7522,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-footer-height'
(7523,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-results-list-width'
(7535,34): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-footer-height'
(7541,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-panel-padding-x'
(7543,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-results-list-width'
(7544,38): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-panel-padding-x'
(7553,32): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-results-list-width'
(7617,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(7618,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(7619,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(7620,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(7655,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(7656,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(7657,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(7658,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(7678,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7695,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(7696,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(7737,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7772,24): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(7773,26): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(7774,22): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(7775,26): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(7781,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(7821,34): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(7821,84): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(7826,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(7827,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(7828,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(7834,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-size'
(7835,27): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-line-height'
(7836,30): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-letter-spacing'
(7862,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(7863,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(7878,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7879,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7880,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7881,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7890,26): run-time error CSS1039: Token not allowed after unary operator: '-of-canonical-service-header-height'
(7891,22): run-time error CSS1039: Token not allowed after unary operator: '-of-canonical-service-header-height'
(7892,26): run-time error CSS1039: Token not allowed after unary operator: '-of-canonical-service-header-height'
(7915,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(7916,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(7917,25): run-time error CSS1039: Token not allowed after unary operator: '-of-canonical-service-title-size'
(7919,27): run-time error CSS1039: Token not allowed after unary operator: '-of-canonical-service-title-line-height'
(7920,30): run-time error CSS1039: Token not allowed after unary operator: '-of-canonical-service-title-letter-spacing'
(8292,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(8294,28): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(8296,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(8313,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(8341,26): run-time error CSS1039: Token not allowed after unary operator: '-of-map-bg'
(8369,27): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-footer-height'
(8551,17): run-time error CSS1039: Token not allowed after unary operator: '-of-text'
(8599,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(8612,24): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(8618,24): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(8630,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(8634,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(8642,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(8643,24): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(8662,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(8663,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(8679,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(8680,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(8702,17): run-time error CSS1039: Token not allowed after unary operator: '-of-text-muted'
(8714,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(8715,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(8752,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(8754,28): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(8756,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(8767,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(8768,24): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(8785,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(9077,28): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(9212,28): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(9445,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(9628,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(9710,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(9721,28): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(9727,28): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(9796,21): run-time error CSS1039: Token not allowed after unary operator: '-of-text-muted'
(9822,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(9851,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(9852,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(9879,21): run-time error CSS1039: Token not allowed after unary operator: '-of-text-muted'
(9916,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(9928,28): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(9950,21): run-time error CSS1039: Token not allowed after unary operator: '-of-text-muted'
(9991,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(10011,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(10046,26): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(10047,32): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(10052,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(10157,28): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(10158,36): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(10184,21): run-time error CSS1039: Token not allowed after unary operator: '-of-text-muted'
(10231,32): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(10232,32): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(10406,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(10428,28): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(10429,36): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(10457,21): run-time error CSS1039: Token not allowed after unary operator: '-of-text-muted'
(10506,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(10527,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(10573,32): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(10575,32): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(10680,28): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(10681,36): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(10709,21): run-time error CSS1039: Token not allowed after unary operator: '-of-text-muted'
(10750,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(10770,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(10815,32): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(10816,32): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(10896,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(10919,28): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(10920,36): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(10949,21): run-time error CSS1039: Token not allowed after unary operator: '-of-text-muted'
(10995,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(11017,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(11064,32): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(11065,32): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(11210,128): run-time error CSS1030: Expected identifier, found '.'
(11210,129): run-time error CSS1030: Expected identifier, found 'of-results-partner-card__select'
(11210,160): run-time error CSS1031: Expected selector, found ')'
(11210,160): run-time error CSS1025: Expected comma or open brace, found ')'
(11219,128): run-time error CSS1030: Expected identifier, found '.'
(11219,129): run-time error CSS1030: Expected identifier, found 'of-results-partner-card__select'
(11219,160): run-time error CSS1031: Expected selector, found ')'
(11219,160): run-time error CSS1025: Expected comma or open brace, found ')'
(11227,128): run-time error CSS1030: Expected identifier, found '.'
(11227,129): run-time error CSS1030: Expected identifier, found 'of-results-partner-card__select'
(11227,160): run-time error CSS1031: Expected selector, found ')'
(11227,160): run-time error CSS1025: Expected comma or open brace, found ')'
(11233,128): run-time error CSS1030: Expected identifier, found '.'
(11233,129): run-time error CSS1030: Expected identifier, found 'of-results-partner-card__select'
(11233,160): run-time error CSS1031: Expected selector, found ')'
(11233,160): run-time error CSS1025: Expected comma or open brace, found ')'
(11239,128): run-time error CSS1030: Expected identifier, found '.'
(11239,129): run-time error CSS1030: Expected identifier, found 'of-results-partner-card__select'
(11239,160): run-time error CSS1031: Expected selector, found ')'
(11239,160): run-time error CSS1025: Expected comma or open brace, found ')'
(11250,128): run-time error CSS1030: Expected identifier, found '.'
(11250,129): run-time error CSS1030: Expected identifier, found 'of-results-partner-card__select'
(11250,160): run-time error CSS1031: Expected selector, found ')'
(11250,160): run-time error CSS1025: Expected comma or open brace, found ')'
(11259,128): run-time error CSS1030: Expected identifier, found '.'
(11259,129): run-time error CSS1030: Expected identifier, found 'of-results-partner-card__select'
(11259,160): run-time error CSS1031: Expected selector, found ')'
(11259,160): run-time error CSS1025: Expected comma or open brace, found ')'
(11274,128): run-time error CSS1030: Expected identifier, found '.'
(11274,129): run-time error CSS1030: Expected identifier, found 'of-results-partner-card__select'
(11274,160): run-time error CSS1031: Expected selector, found ')'
(11274,160): run-time error CSS1025: Expected comma or open brace, found ')'
(11283,128): run-time error CSS1030: Expected identifier, found '.'
(11283,129): run-time error CSS1030: Expected identifier, found 'of-results-partner-card__select'
(11283,160): run-time error CSS1031: Expected selector, found ')'
(11283,160): run-time error CSS1025: Expected comma or open brace, found ')'
(11289,128): run-time error CSS1030: Expected identifier, found '.'
(11289,129): run-time error CSS1030: Expected identifier, found 'of-results-partner-card__select'
(11289,160): run-time error CSS1031: Expected selector, found ')'
(11289,160): run-time error CSS1025: Expected comma or open brace, found ')'
(11295,128): run-time error CSS1030: Expected identifier, found '.'
(11295,129): run-time error CSS1030: Expected identifier, found 'of-results-partner-card__select'
(11295,160): run-time error CSS1031: Expected selector, found ')'
(11295,160): run-time error CSS1025: Expected comma or open brace, found ')'
(11313,28): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(11628,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(12038,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(12138,24): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(12144,24): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(12153,28): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(12159,28): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(12169,24): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(12178,24): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(12210,30): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(12214,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(12215,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-page-bg'
(12224,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(12238,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(12248,22): run-time error CSS1039: Token not allowed after unary operator: '-of-focus-ring'
(12265,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(12266,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(12352,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(12353,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(12363,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(12380,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(12381,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(12400,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(12425,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(12464,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(12472,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(12473,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(12508,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(12509,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(12516,30): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(12538,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(12539,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(12544,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(12546,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(12553,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(12556,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(12561,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(12624,34): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(12627,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-page-bg'
(12632,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(12637,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-size'
(12638,27): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-line-height'
(12639,30): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-letter-spacing'
(12779,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(12835,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(12878,24): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(12887,40): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(12887,89): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(12890,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(12945,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(13147,34): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(13153,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(13154,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-page-bg'
(13163,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(13170,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-size'
(13171,27): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-line-height'
(13172,30): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-letter-spacing'
(13314,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(13364,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(13367,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(13498,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(13499,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(13500,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(13501,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(13536,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(13537,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(13538,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(13539,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(13559,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13576,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(13577,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(13618,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13653,24): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(13654,26): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(13655,22): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(13656,26): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(13662,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(13737,34): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(13742,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(13743,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(13744,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(13750,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-size'
(13751,27): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-line-height'
(13752,30): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-letter-spacing'
(13770,26): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(13771,22): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(13781,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-size'
(13782,27): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-line-height'
(13783,30): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-letter-spacing'
(13846,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-page-bg'
(13873,26): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(13874,22): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(13875,26): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(13890,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(13891,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-size'
(13893,27): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-line-height'
(13894,30): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-letter-spacing'
(13964,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-page-bg'
(13973,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(14071,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(14114,26): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(14115,22): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(14123,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(14124,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(14139,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14140,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14141,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14142,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14151,26): run-time error CSS1039: Token not allowed after unary operator: '-of-canonical-service-header-height'
(14152,22): run-time error CSS1039: Token not allowed after unary operator: '-of-canonical-service-header-height'
(14153,26): run-time error CSS1039: Token not allowed after unary operator: '-of-canonical-service-header-height'
(14176,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(14177,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(14178,25): run-time error CSS1039: Token not allowed after unary operator: '-of-canonical-service-title-size'
(14180,27): run-time error CSS1039: Token not allowed after unary operator: '-of-canonical-service-title-line-height'
(14181,30): run-time error CSS1039: Token not allowed after unary operator: '-of-canonical-service-title-letter-spacing'
(14250,34): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(14298,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(14304,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(14315,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(14324,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(14356,30): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(14360,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(14361,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-page-bg'
(14370,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(14384,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(14394,22): run-time error CSS1039: Token not allowed after unary operator: '-of-focus-ring'
(14411,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(14412,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(14474,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(14487,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(14488,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(14495,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(14496,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(14531,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(14542,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(14543,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(14553,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(14554,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(14569,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(14586,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(14587,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(14605,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(14606,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(14620,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(14621,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(14649,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(14658,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(14659,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(14678,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(14679,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(14691,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(14696,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(14697,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(14709,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(14712,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(14717,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(14732,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-size'
(14733,27): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-line-height'
(14734,30): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-letter-spacing'
(14833,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(14979,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(15022,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(15036,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(15048,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(15060,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(15066,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(15073,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(15110,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(15121,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(15269,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(15352,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(15370,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(15381,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(15396,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(15397,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(15446,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(15467,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(15468,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(15478,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(15479,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(15498,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(15499,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(15526,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(15527,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(15542,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(15545,38): run-time error CSS1030: Expected identifier, found ':'
(15545,46): run-time error CSS1031: Expected selector, found ')'
(15545,46): run-time error CSS1025: Expected comma or open brace, found ')'
(15551,38): run-time error CSS1030: Expected identifier, found ':'
(15551,46): run-time error CSS1031: Expected selector, found ')'
(15551,46): run-time error CSS1025: Expected comma or open brace, found ')'
(15571,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(15640,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(15641,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(15656,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(15657,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(15710,44): run-time error CSS1030: Expected identifier, found ':'
(15710,52): run-time error CSS1031: Expected selector, found ')'
(15710,52): run-time error CSS1025: Expected comma or open brace, found ')'
(15827,44): run-time error CSS1030: Expected identifier, found ':'
(15827,52): run-time error CSS1031: Expected selector, found ')'
(15827,52): run-time error CSS1025: Expected comma or open brace, found ')'
(15848,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(15853,47): run-time error CSS1030: Expected identifier, found ':'
(15853,55): run-time error CSS1031: Expected selector, found ')'
(15853,55): run-time error CSS1025: Expected comma or open brace, found ')'
(15872,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(15895,48): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(15897,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(15900,38): run-time error CSS1030: Expected identifier, found ':'
(15900,46): run-time error CSS1031: Expected selector, found ')'
(15900,46): run-time error CSS1025: Expected comma or open brace, found ')'
(15960,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(15961,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(15981,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(15982,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(15994,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(15995,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(16019,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(16020,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(16072,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(16073,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(16108,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(16114,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(16130,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(16131,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(16137,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(16138,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(16165,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(16166,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(16183,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(16184,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(16194,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(16195,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(16210,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(16211,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(16218,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(16219,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(16272,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(16273,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(16298,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(16299,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(16310,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(16311,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(16328,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(16329,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(16354,34): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(16354,78): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(16361,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(16362,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(16367,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-size'
(16368,27): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-line-height'
(16369,30): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-letter-spacing'
(16384,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-content-x'
(16391,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(16392,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(16479,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(16480,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(16484,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-size'
(16485,27): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-line-height'
(16486,30): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-letter-spacing'
(16495,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(16496,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(16504,38): run-time error CSS1030: Expected identifier, found '.'
(16504,71): run-time error CSS1031: Expected selector, found ')'
(16504,71): run-time error CSS1025: Expected comma or open brace, found ')'
(16509,38): run-time error CSS1030: Expected identifier, found '.'
(16509,71): run-time error CSS1031: Expected selector, found ')'
(16509,71): run-time error CSS1025: Expected comma or open brace, found ')'
(16515,44): run-time error CSS1030: Expected identifier, found ':'
(16515,52): run-time error CSS1031: Expected selector, found ')'
(16515,52): run-time error CSS1025: Expected comma or open brace, found ')'
(16808,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(16843,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(16851,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(16860,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(17251,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(17390,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(17415,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(17426,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(17428,32): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(17445,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(17454,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(17455,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(17465,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(17466,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(17488,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(17508,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(17673,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(17675,32): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(17758,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(17759,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(17816,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(17826,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(17836,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(17949,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(18226,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(18228,32): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(18446,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(18473,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(18486,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(18488,32): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(18510,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(18519,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(18520,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(18530,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(18531,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(18578,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(18591,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(18642,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(18703,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(18714,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(18734,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(18743,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(18795,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(18804,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(18820,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(18835,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(18853,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(18909,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(18920,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(18930,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(18999,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(19001,32): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(19008,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(19009,32): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(19051,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(19075,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(19083,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(19164,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(19171,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(19185,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(19193,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(19195,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(19201,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(19203,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(19209,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(19210,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(19218,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(19220,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(19230,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(19232,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(19241,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(19242,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(19291,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(19307,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(19314,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(19315,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(19389,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(19400,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(19407,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(19431,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(19438,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(19440,32): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(19456,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(19457,32): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(19491,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(19551,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(19560,98): run-time error CSS1030: Expected identifier, found ':'
(19560,106): run-time error CSS1031: Expected selector, found ')'
(19560,106): run-time error CSS1025: Expected comma or open brace, found ')'
(19602,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(19757,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(19765,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(19772,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(19815,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(19816,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(19817,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(19818,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(19853,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(19854,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(19855,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(19856,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(19876,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(19893,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(19894,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(19935,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(19970,24): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(19971,26): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(19972,22): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(19973,26): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(19979,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(20034,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(20074,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(20075,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(20256,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(20264,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(20270,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(20271,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(20301,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(20312,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(20314,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(20320,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(20321,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(20480,22): run-time error CSS1030: Expected identifier, found '#of-home-ctn'
(20480,64): run-time error CSS1031: Expected selector, found ')'
(20480,64): run-time error CSS1025: Expected comma or open brace, found ')'
(20633,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(20644,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(20651,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(20685,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(20729,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(20731,32): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(20737,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(20739,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(20745,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(20746,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(20788,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(20789,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(20892,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(20894,32): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(20902,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(20904,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(20910,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(20911,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(20935,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(20937,32): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(20942,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(20944,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(20950,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(20951,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(20986,34): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(20986,84): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(20991,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(20992,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(20993,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(20999,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-size'
(21000,27): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-line-height'
(21001,30): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-mobile-header-title-letter-spacing'
(21013,22): run-time error CSS1030: Expected identifier, found '#of-home-ctn'
(21013,64): run-time error CSS1031: Expected selector, found ')'
(21013,64): run-time error CSS1025: Expected comma or open brace, found ')'
(21104,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(21105,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(21181,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(21182,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(21198,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(21199,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(21200,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(21201,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(21210,26): run-time error CSS1039: Token not allowed after unary operator: '-of-canonical-service-header-height'
(21211,22): run-time error CSS1039: Token not allowed after unary operator: '-of-canonical-service-header-height'
(21212,26): run-time error CSS1039: Token not allowed after unary operator: '-of-canonical-service-header-height'
(21235,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(21236,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(21237,25): run-time error CSS1039: Token not allowed after unary operator: '-of-canonical-service-title-size'
(21239,27): run-time error CSS1039: Token not allowed after unary operator: '-of-canonical-service-title-line-height'
(21240,30): run-time error CSS1039: Token not allowed after unary operator: '-of-canonical-service-title-letter-spacing'
(21267,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(21282,21): run-time error CSS1039: Token not allowed after unary operator: '-of-booking-client-width'
(21283,25): run-time error CSS1039: Token not allowed after unary operator: '-of-booking-client-width'
(21389,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(21394,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(21403,32): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(21414,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(21415,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(21433,21): run-time error CSS1039: Token not allowed after unary operator: '-of-booking-client-width'
(21434,25): run-time error CSS1039: Token not allowed after unary operator: '-of-booking-client-width'
(21456,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(21458,32): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(21461,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(21510,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(21511,32): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(21513,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(21536,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(21537,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(21595,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(21597,32): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(21600,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(21665,32): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(21667,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(21696,21): run-time error CSS1039: Token not allowed after unary operator: '-of-booking-client-width'
(21697,25): run-time error CSS1039: Token not allowed after unary operator: '-of-booking-client-width'
(21737,25): run-time error CSS1039: Token not allowed after unary operator: '-of-booking-client-width'
(21738,29): run-time error CSS1039: Token not allowed after unary operator: '-of-booking-client-width'
(21750,21): run-time error CSS1039: Token not allowed after unary operator: '-of-booking-client-width'
(21751,25): run-time error CSS1039: Token not allowed after unary operator: '-of-booking-client-width'
(21779,21): run-time error CSS1039: Token not allowed after unary operator: '-of-booking-client-width'
(21780,25): run-time error CSS1039: Token not allowed after unary operator: '-of-booking-client-width'
(21807,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-text-text-body'
(21991,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-page-bg'
(22120,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-page-bg'
(22133,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22137,35): run-time error CSS1039: Token not allowed after unary operator: '-of-booking-fixed-actions-height'
(22144,26): run-time error CSS1039: Token not allowed after unary operator: '-of-booking-fixed-actions-height'
(22145,22): run-time error CSS1039: Token not allowed after unary operator: '-of-booking-fixed-actions-height'
(22187,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22191,35): run-time error CSS1039: Token not allowed after unary operator: '-of-booking-fixed-actions-height'
(22198,26): run-time error CSS1039: Token not allowed after unary operator: '-of-booking-fixed-actions-height'
(22199,22): run-time error CSS1039: Token not allowed after unary operator: '-of-booking-fixed-actions-height'
(22238,22): run-time error CSS1039: Token not allowed after unary operator: '-of-booking-fixed-actions-height'
(22239,26): run-time error CSS1039: Token not allowed after unary operator: '-of-booking-fixed-actions-height'
(22332,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-300'
(22333,24): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-300'
(22494,16): run-time error CSS1039: Token not allowed after unary operator: '-of-layout-margin'
(22495,18): run-time error CSS1039: Token not allowed after unary operator: '-of-layout-margin'
(22498,35): run-time error CSS1039: Token not allowed after unary operator: '-of-layout-margin'
(22509,42): run-time error CSS1039: Token not allowed after unary operator: '-of-layout-margin'
(22589,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(22595,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(22620,23): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(22628,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(22664,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(22673,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(22691,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(22730,21): run-time error CSS1039: Token not allowed after unary operator: '-of-layout-margin'
(22742,27): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(22765,27): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(22829,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(22834,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-form'
(22885,27): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(22919,27): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(22931,27): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(22977,27): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-footer-height'
(23063,27): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(23268,36): run-time error CSS1039: Token not allowed after unary operator: '-of-header-height'
(23268,69): run-time error CSS1039: Token not allowed after unary operator: '-of-layout-margin'
(23413,23): run-time error CSS1039: Token not allowed after unary operator: '-of-layout-margin'
(23423,36): run-time error CSS1039: Token not allowed after unary operator: '-of-header-height'
(23423,69): run-time error CSS1039: Token not allowed after unary operator: '-of-layout-margin'
(23469,36): run-time error CSS1039: Token not allowed after unary operator: '-of-header-height'
(23469,69): run-time error CSS1039: Token not allowed after unary operator: '-of-layout-margin'
(23513,36): run-time error CSS1039: Token not allowed after unary operator: '-of-header-height'
(23513,69): run-time error CSS1039: Token not allowed after unary operator: '-of-layout-margin'
(23585,37): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-search-width'
(23589,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-map-min-height'
(23591,26): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-100'
(23618,19): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-panel-padding-y'
(23619,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-panel-padding-x'
(23620,27): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-footer-height'
(23620,72): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-panel-padding-y'
(23621,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-results-list-width'
(23630,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-panel-padding-x'
(23631,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-footer-height'
(23632,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-results-list-width'
(23641,37): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-search-width'
(23647,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-panel-padding-x'
(23649,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-results-list-width'
(23666,34): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(23666,96): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(23673,26): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-100'
(23707,37): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-search-width'
(23708,34): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(23708,96): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(23709,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-map-min-height'
(23714,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-panel-padding-x'
(23717,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-results-list-width'
(23724,37): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-search-width'
(23748,34): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(23767,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(23768,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(23822,37): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-search-width'
(23823,34): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(23823,96): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(23868,37): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-search-width'
(23869,34): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(23869,96): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(23872,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-desktop-map-min-height'
(23973,26): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-100'
(24048,26): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-100'
(24109,26): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-100'
(24126,26): run-time error CSS1039: Token not allowed after unary operator: '-of-map-bg'
(24164,34): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(24164,96): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(24179,34): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(24179,96): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(24185,26): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-100'
(24195,22): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(24196,26): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(24219,26): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-100'
(24229,22): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(24230,26): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(24243,26): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-100'
(24261,26): run-time error CSS1039: Token not allowed after unary operator: '-of-map-bg'
(24329,22): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(24330,26): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(24354,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(24398,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(24399,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(24423,22): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(24424,26): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(24435,34): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(24435,96): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(24464,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(24503,34): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(24503,96): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(24507,36): run-time error CSS1039: Token not allowed after unary operator: '-of-header-height'
(24507,69): run-time error CSS1039: Token not allowed after unary operator: '-of-layout-margin'
(24526,26): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(24527,22): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(24541,26): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(24542,22): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(24606,34): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(24606,96): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(24641,26): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-100'
(24710,36): run-time error CSS1039: Token not allowed after unary operator: '-of-header-height'
(24710,69): run-time error CSS1039: Token not allowed after unary operator: '-of-layout-margin'
(24745,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-page-bg'
(24762,34): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(24762,96): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(24768,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-page-bg'
(24788,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-page-bg'
(24805,34): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(24805,96): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(24811,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-page-bg'
(24868,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(24869,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(24916,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(24917,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(24943,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(24944,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(24945,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(24946,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(24947,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(24954,26): run-time error CSS1039: Token not allowed after unary operator: '-of-shared-service-header-height'
(24955,22): run-time error CSS1039: Token not allowed after unary operator: '-of-shared-service-header-height'
(24956,26): run-time error CSS1039: Token not allowed after unary operator: '-of-shared-service-header-height'
(24967,25): run-time error CSS1039: Token not allowed after unary operator: '-of-shared-service-header-side-x'
(24989,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(24990,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(24991,25): run-time error CSS1039: Token not allowed after unary operator: '-of-shared-service-header-title-size'
(24993,27): run-time error CSS1039: Token not allowed after unary operator: '-of-shared-service-header-title-line-height'
(24994,30): run-time error CSS1039: Token not allowed after unary operator: '-of-shared-service-header-title-letter-spacing'
(25032,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(25033,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(25034,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(25035,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(25044,26): run-time error CSS1039: Token not allowed after unary operator: '-of-canonical-service-header-height'
(25045,22): run-time error CSS1039: Token not allowed after unary operator: '-of-canonical-service-header-height'
(25046,26): run-time error CSS1039: Token not allowed after unary operator: '-of-canonical-service-header-height'
(25069,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(25070,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(25071,25): run-time error CSS1039: Token not allowed after unary operator: '-of-canonical-service-title-size'
(25073,27): run-time error CSS1039: Token not allowed after unary operator: '-of-canonical-service-title-line-height'
(25074,30): run-time error CSS1039: Token not allowed after unary operator: '-of-canonical-service-title-letter-spacing'
(25121,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(25122,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(25144,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-content-x'
(25145,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-content-x'
(25182,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(25298,22): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(25299,26): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(25355,22): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(25356,26): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(25357,26): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(25407,34): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(25407,96): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(25430,24): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(25453,34): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(25453,96): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(25478,22): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(25479,26): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(25480,26): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(25496,34): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(25496,96): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(25509,22): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(25510,26): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(25511,26): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(25524,22): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(25525,26): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(25526,26): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(25571,34): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(25571,96): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(25591,22): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(25592,26): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(25593,26): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(25616,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-page-bg'
(25646,34): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(25646,96): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(25675,24): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(25681,40): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(25681,89): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(25683,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(25741,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(25925,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-page-bg'
(25944,34): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(25944,96): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(25952,21): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(25953,26): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-page-bg'
(25971,22): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(25972,26): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(25973,26): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(26013,22): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(26014,26): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(26015,26): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(26118,34): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(26191,34): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(26229,34): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(26280,34): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-header-height'
(26334,34): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(26334,105): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(26350,36): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(26351,40): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(26395,34): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(26459,34): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(26496,34): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(26496,96): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(26511,26): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(26512,22): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(26513,26): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-footer-height'
(26532,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-content-x'
(26533,29): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-content-x'
(26651,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(26652,28): run-time error CSS1039: Token not allowed after unary operator: '-of-touch-card-rail-edge-space'
(26653,29): run-time error CSS1039: Token not allowed after unary operator: '-of-touch-card-rail-edge-space'
(26654,35): run-time error CSS1039: Token not allowed after unary operator: '-of-touch-card-rail-edge-space'
(26655,36): run-time error CSS1039: Token not allowed after unary operator: '-of-touch-card-rail-edge-space'
(26666,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(26673,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(26681,20): run-time error CSS1039: Token not allowed after unary operator: '-of-touch-results-rail-left'
(26683,34): run-time error CSS1039: Token not allowed after unary operator: '-of-touch-results-rail-left'
(26705,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(26706,28): run-time error CSS1039: Token not allowed after unary operator: '-of-touch-card-rail-edge-space'
(26707,29): run-time error CSS1039: Token not allowed after unary operator: '-of-touch-card-rail-edge-space'
(26708,35): run-time error CSS1039: Token not allowed after unary operator: '-of-touch-card-rail-edge-space'
(26709,36): run-time error CSS1039: Token not allowed after unary operator: '-of-touch-card-rail-edge-space'
(26777,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(26782,28): run-time error CSS1039: Token not allowed after unary operator: '-of-touch-card-rail-edge-space'
(26783,29): run-time error CSS1039: Token not allowed after unary operator: '-of-touch-card-rail-edge-space'
(26784,35): run-time error CSS1039: Token not allowed after unary operator: '-of-touch-card-rail-edge-space'
(26785,36): run-time error CSS1039: Token not allowed after unary operator: '-of-touch-card-rail-edge-space'
(26796,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(26797,34): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(26876,34): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(26898,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(26900,34): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(26909,34): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(27025,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(27026,28): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(27050,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27051,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27052,34): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(27052,96): run-time error CSS1039: Token not allowed after unary operator: '-of-search-process-footer-height'
(27067,22): run-time error CSS1039: Token not allowed after unary operator: '-of-search-process-footer-height'
(27068,26): run-time error CSS1039: Token not allowed after unary operator: '-of-search-process-footer-height'
(27069,26): run-time error CSS1039: Token not allowed after unary operator: '-of-search-process-footer-height'
(27085,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27086,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27087,34): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(27087,96): run-time error CSS1039: Token not allowed after unary operator: '-of-search-process-footer-height'
(27092,34): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(27092,96): run-time error CSS1039: Token not allowed after unary operator: '-of-search-process-footer-height'
(27109,22): run-time error CSS1039: Token not allowed after unary operator: '-of-search-process-footer-height'
(27110,26): run-time error CSS1039: Token not allowed after unary operator: '-of-search-process-footer-height'
(27111,26): run-time error CSS1039: Token not allowed after unary operator: '-of-search-process-footer-height'
(27141,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-100'
(27142,28): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-200'
(27151,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-action-height'
(27153,24): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-action-padding-x'
(27154,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-radius-pill'
(27155,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(27191,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27192,30): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(27203,26): run-time error CSS1039: Token not allowed after unary operator: '-of-search-process-footer-height'
(27215,18): run-time error CSS1039: Token not allowed after unary operator: '-of-search-process-footer-height'
(27216,22): run-time error CSS1039: Token not allowed after unary operator: '-of-search-process-footer-height'
(27217,22): run-time error CSS1039: Token not allowed after unary operator: '-of-search-process-footer-height'
(27231,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-radius-pill'
(27244,36): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(27244,85): run-time error CSS1039: Token not allowed after unary operator: '-of-search-process-footer-height'
(27245,40): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(27245,89): run-time error CSS1039: Token not allowed after unary operator: '-of-search-process-footer-height'
(27252,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27253,34): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(27257,34): run-time error CSS1039: Token not allowed after unary operator: '-of-responsive-shell-header-height'
(27279,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27331,31): run-time error CSS1039: Token not allowed after unary operator: '-of-app-driver-bottom-actions-height'
(27345,18): run-time error CSS1039: Token not allowed after unary operator: '-of-app-driver-bottom-actions-height'
(27346,22): run-time error CSS1039: Token not allowed after unary operator: '-of-app-driver-bottom-actions-height'
(27347,22): run-time error CSS1039: Token not allowed after unary operator: '-of-app-driver-bottom-actions-height'
(27349,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-page-bg'
(27369,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-radius-pill'
(27417,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(27418,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(27423,30): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(27424,25): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-radius-pill'
(27458,31): run-time error CSS1039: Token not allowed after unary operator: '-of-app-driver-bottom-actions-height'
(27474,31): run-time error CSS1039: Token not allowed after unary operator: '-of-app-driver-bottom-actions-height'
(27484,22): run-time error CSS1039: Token not allowed after unary operator: '-of-app-driver-bottom-actions-height'
(27502,18): run-time error CSS1039: Token not allowed after unary operator: '-of-app-driver-bottom-actions-height'
(27503,22): run-time error CSS1039: Token not allowed after unary operator: '-of-app-driver-bottom-actions-height'
(27504,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-page-bg'
(27513,23): run-time error CSS1039: Token not allowed after unary operator: '-of-app-driver-bottom-actions-height'
(27519,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-300'
(27520,24): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-300'
(27577,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-page-bg'
(27615,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-page-bg'
(27631,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(27633,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-page-bg'
(27646,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-300'
(27663,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(27664,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(27704,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-page-bg'
(27733,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(27734,23): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(27742,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-700'
(27764,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-600'
(27806,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-300'
(27839,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-300'
(27840,24): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-300'
(27890,23): run-time error CSS1039: Token not allowed after unary operator: '-of-app-driver-bottom-actions-height'
(27907,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27908,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27911,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27912,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27914,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27915,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27916,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27918,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27919,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27920,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27921,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27922,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27924,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27925,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27926,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27927,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27928,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27929,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27930,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27932,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27933,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27934,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27935,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27936,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27938,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27939,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27940,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27941,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27942,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27943,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27944,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27945,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27946,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27947,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27948,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27950,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27951,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27952,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27953,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27954,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27955,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27956,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27957,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27960,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27961,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27963,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27964,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27965,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27966,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27967,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27968,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27970,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27971,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27978,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27979,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27980,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(28169,17): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(28237,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(28426,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(28437,80): run-time error CSS1030: Expected identifier, found ':'
(28437,81): run-time error CSS1030: Expected identifier, found 'disabled'
(28437,89): run-time error CSS1031: Expected selector, found ')'
(28437,89): run-time error CSS1025: Expected comma or open brace, found ')'
(28449,76): run-time error CSS1030: Expected identifier, found ':'
(28449,77): run-time error CSS1030: Expected identifier, found 'disabled'
(28449,85): run-time error CSS1031: Expected selector, found ')'
(28449,85): run-time error CSS1025: Expected comma or open brace, found ')'
(28468,71): run-time error CSS1030: Expected identifier, found ':'
(28468,80): run-time error CSS1031: Expected selector, found ')'
(28468,80): run-time error CSS1025: Expected comma or open brace, found ')'
(28481,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(28482,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-white'
(28484,38): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(28493,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-300'
(28494,26): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-50'
(28495,28): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-300'
(28504,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-500'
(28505,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-50'
(28506,24): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-500'
(28522,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-500'
(28523,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-200'
(28549,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(28561,80): run-time error CSS1030: Expected identifier, found ':'
(28561,81): run-time error CSS1030: Expected identifier, found 'disabled'
(28561,89): run-time error CSS1031: Expected selector, found ')'
(28561,89): run-time error CSS1025: Expected comma or open brace, found ')'
(28574,76): run-time error CSS1030: Expected identifier, found ':'
(28574,77): run-time error CSS1030: Expected identifier, found 'disabled'
(28574,85): run-time error CSS1031: Expected selector, found ')'
(28574,85): run-time error CSS1025: Expected comma or open brace, found ')'
(28594,71): run-time error CSS1030: Expected identifier, found ':'
(28594,80): run-time error CSS1031: Expected selector, found ')'
(28594,80): run-time error CSS1025: Expected comma or open brace, found ')'
(28608,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(28609,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-white'
(28612,24): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(28624,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-300'
(28625,26): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-50'
(28627,28): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-300'
(28628,33): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-300'
(28638,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-500'
(28639,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-50'
(28641,24): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-500'
(28642,29): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-500'
(28659,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-500'
(28660,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-200'
(28662,24): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-200'
(28681,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-500'
(28682,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-200'
(28696,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-500'
(28697,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-200'
(28698,24): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-200'
(28738,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(28749,80): run-time error CSS1030: Expected identifier, found ':'
(28749,81): run-time error CSS1030: Expected identifier, found 'disabled'
(28749,89): run-time error CSS1031: Expected selector, found ')'
(28749,89): run-time error CSS1025: Expected comma or open brace, found ')'
(28766,76): run-time error CSS1030: Expected identifier, found ':'
(28766,77): run-time error CSS1030: Expected identifier, found 'disabled'
(28766,85): run-time error CSS1031: Expected selector, found ')'
(28766,85): run-time error CSS1025: Expected comma or open brace, found ')'
(28790,71): run-time error CSS1030: Expected identifier, found ':'
(28790,80): run-time error CSS1031: Expected selector, found ')'
(28790,80): run-time error CSS1025: Expected comma or open brace, found ')'
(28820,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(28821,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-white'
(28822,24): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(28836,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-300'
(28837,26): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-50'
(28838,28): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-300'
(28839,42): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-300'
(28852,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-500'
(28853,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-50'
(28854,24): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-500'
(28855,38): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-500'
(28883,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-500'
(28884,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-200'
(28885,24): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-200'
(28989,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(28992,28): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(28994,28): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-white'
(29043,17): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-white'
(29044,28): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(29045,24): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(29143,28): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(29145,28): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(29152,28): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-white'
(29162,32): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-white'
(29267,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(29268,27): run-time error CSS1039: Token not allowed after unary operator: '-of-font-family-brand'
(29272,32): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-white'
(29276,32): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(29481,21): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-400'
(29541,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-300'
(29542,24): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-300'
(29589,97): run-time error CSS1030: Expected identifier, found ':'
(29589,106): run-time error CSS1031: Expected selector, found ')'
(29589,106): run-time error CSS1025: Expected comma or open brace, found ')'
(29713,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-neutral-neutral-200'
(29725,22): run-time error CSS1039: Token not allowed after unary operator: '-of-flow-brand-color'
(29730,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-300'
(29808,22): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-300'
(29809,24): run-time error CSS1039: Token not allowed after unary operator: '-ayvens-theme-brand-secondary-300'
 */
/* 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-50: #DBE1E4;
    --ayvens-theme-brand-secondary-300: #3F5D6D;
    --ayvens-theme-brand-secondary-400: #0F3549;
    --ayvens-theme-brand-secondary-500: #072534;
    --ayvens-theme-brand-primary-400: #00505c;
    --ayvens-theme-neutral-neutral-100: #F6F6F6;
    --ayvens-theme-neutral-neutral-200: #EEEEEE;
    --ayvens-theme-neutral-neutral-500: #989A9A;
    --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: 0px;
    --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 {
    width: 100%;
    min-height: 100%;
    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);
}

body.of-body {
    overflow: hidden;
}



/* 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;
}

.of-body--app-driver .of-main--app-driver {
    padding: 0;
}


/* 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-desktop-search-width: clamp(384px, 27vw, 420px);
    --of-flow-desktop-search-content-width: 336px;
    --of-flow-desktop-results-list-width: 300px;
    --of-flow-desktop-footer-height: 56px;
    --of-flow-desktop-panel-padding-x: clamp(16px, 1.4vw, 24px);
    --of-flow-desktop-panel-padding-y: 24px;
    --of-flow-desktop-map-min-height: 620px;
    --of-flow-mobile-header-title-size: 16px;
    --of-flow-mobile-header-title-line-height: 20px;
    --of-flow-mobile-header-title-letter-spacing: 0.2px;
}

.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/Ayv_icon_CarRent_Sblue.svg");
    mask-image: url("/Images/Flow/Icons/Ayv_icon_CarRent_Sblue.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: 16px !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-size: 13px !important;
    font-weight: 400 !important;
    line-height: 16px !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;
}

body.of-body .of-flow-footer a,
body.of-body .of-search-shell__footer a,
body.of-body .of-results-shell__footer a,
body.of-body .of-partner-detail__footer a,
body.of-body .of-booking__footer a,
body.of-body .of-flow-footer a:visited,
body.of-body .of-search-shell__footer a:visited,
body.of-body .of-results-shell__footer a:visited,
body.of-body .of-partner-detail__footer a:visited,
body.of-body .of-booking__footer a:visited {
    color: inherit !important;
    text-decoration: none;
}

body.of-body .of-flow-footer a:hover,
body.of-body .of-search-shell__footer a:hover,
body.of-body .of-results-shell__footer a:hover,
body.of-body .of-partner-detail__footer a:hover,
body.of-body .of-booking__footer a:hover,
body.of-body .of-flow-footer a:focus,
body.of-body .of-search-shell__footer a:focus,
body.of-body .of-results-shell__footer a:focus,
body.of-body .of-partner-detail__footer a:focus,
body.of-body .of-booking__footer a:focus {
    color: inherit !important;
    text-decoration: underline;
}

@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: 13px !important;
        line-height: 16px !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: 13px !important;
        line-height: 16px !important;
    }
}


/* Pass 10.94: canonical legal footer alignment across all OF shells.
   Same horizontal text position everywhere: 24px left/right padding, no centered/max-width span. */
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 {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    color: #ffffff !important;
    background: var(--of-flow-brand-color, #0f3549) !important;
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif) !important;
    font-weight: 400 !important;
    text-align: left !important;
    letter-spacing: 0.3px !important;
    overflow: hidden !important;
    box-sizing: border-box !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;
    min-width: 0 !important;
    margin: 0 !important;
    color: inherit !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    box-sizing: border-box !important;
}

body.of-body .of-flow-footer a,
body.of-body .of-search-shell__footer a,
body.of-body .of-results-shell__footer a,
body.of-body .of-partner-detail__footer a,
body.of-body .of-booking__footer a {
    color: inherit !important;
    text-decoration: none !important;
}

@media (max-width: 1279px) {
    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-left: 24px !important;
        padding-right: 24px !important;
    }
}


/* Pass 10.95: canonical footer size for all non-desktop shells.
   Text position and footer height now match across map, detail, search and booking. */
@media (max-width: 1279px) {
    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 {
        flex: 0 0 var(--of-flow-footer-height, 52px) !important;
        min-height: var(--of-flow-footer-height, 52px) !important;
        height: var(--of-flow-footer-height, 52px) !important;
        max-height: var(--of-flow-footer-height, 52px) !important;
        padding: 5px 24px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        font-size: 11.5px !important;
        line-height: 14px !important;
        letter-spacing: 0.15px !important;
        text-align: left !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;
        margin: 0 !important;
        white-space: normal !important;
        overflow: hidden !important;
        overflow-wrap: anywhere !important;
        text-align: left !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 {
        flex-basis: var(--of-flow-footer-height, 46px) !important;
        min-height: var(--of-flow-footer-height, 46px) !important;
        height: var(--of-flow-footer-height, 46px) !important;
        max-height: var(--of-flow-footer-height, 46px) !important;
        padding: 3px 24px !important;
        font-size: 10.5px !important;
        line-height: 13px !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 {
        line-height: 13px !important;
    }
}


/* Pass 10.96: fixed non-desktop footer height and stable legal-copy alignment.
   Tablet was inheriting the 88px mobile-flow token; force the same compact footer everywhere below desktop. */
@media (max-width: 1279px) {
    body.of-body {
        --of-flow-footer-height: 52px !important;
    }

    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 {
        flex: 0 0 52px !important;
        min-height: 52px !important;
        height: 52px !important;
        max-height: 52px !important;
        padding: 5px 24px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
        color: #ffffff !important;
        background: var(--of-flow-brand-color, #0f3549) !important;
        font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif) !important;
        font-size: 11.5px !important;
        font-weight: 400 !important;
        line-height: 14px !important;
        letter-spacing: 0.15px !important;
        text-align: left !important;
        box-sizing: border-box !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;
        min-width: 0 !important;
        margin: 0 !important;
        color: inherit !important;
        text-align: left !important;
        white-space: normal !important;
        overflow: hidden !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        line-height: 14px !important;
        box-sizing: border-box !important;
    }

    body.of-body .of-flow-footer a,
    body.of-body .of-search-shell__footer a,
    body.of-body .of-results-shell__footer a,
    body.of-body .of-partner-detail__footer a,
    body.of-body .of-booking__footer a {
        color: inherit !important;
        text-decoration: none !important;
    }
}

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

    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 {
        flex-basis: 46px !important;
        min-height: 46px !important;
        height: 46px !important;
        max-height: 46px !important;
        padding: 3px 24px !important;
        font-size: 10.5px !important;
        line-height: 13px !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 {
        line-height: 13px !important;
    }
}


/* Pass 10.97: restore tablet footer to the responsive shell size.
   Tablet footer is 32px like the original responsive shell; mobile keeps the 52/46px mobile footer. */
@media (min-width: 480px) and (max-width: 1279px) {
    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 {
        flex: 0 0 var(--of-responsive-shell-footer-height, 32px) !important;
        min-height: var(--of-responsive-shell-footer-height, 32px) !important;
        height: var(--of-responsive-shell-footer-height, 32px) !important;
        max-height: var(--of-responsive-shell-footer-height, 32px) !important;
        padding: 6px 24px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
        color: #ffffff !important;
        background: var(--of-flow-brand-color, #0f3549) !important;
        font-size: 10.5px !important;
        line-height: 13px !important;
        letter-spacing: 0.15px !important;
        text-align: left !important;
        box-sizing: border-box !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;
        min-width: 0 !important;
        margin: 0 !important;
        color: inherit !important;
        text-align: left !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: clip !important;
        line-height: 13px !important;
        box-sizing: border-box !important;
    }

    body.of-body .of-flow-footer a,
    body.of-body .of-search-shell__footer a,
    body.of-body .of-results-shell__footer a,
    body.of-body .of-partner-detail__footer a,
    body.of-body .of-booking__footer a {
        color: inherit !important;
        text-decoration: none !important;
    }
}

/* Pass 11.18: restore compact mobile header height; only service titles get a small font bump. */
@media (max-width: 479.98px) {
    body.of-body {
        --of-flow-header-height: 60px !important;
        --of-flow-mobile-header-title-size: 18px !important;
        --of-flow-mobile-header-title-line-height: 23px !important;
        --of-flow-mobile-header-title-letter-spacing: 0.3px !important;
    }
}

@media (max-width: 390px) and (max-height: 700px) {
    body.of-body {
        --of-flow-header-height: 54px !important;
        --of-flow-mobile-header-title-size: 17px !important;
        --of-flow-mobile-header-title-line-height: 22px !important;
    }
}


/* Pass 11.70: mobile legal footer readability requested by client.
   Keep tablet/desktop untouched; increase mobile footer type, line-height and spacing. */
@media (max-width: 479px) {
    body.of-body {
        --of-flow-footer-height: 76px !important;
    }

    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 {
        flex-basis: 76px !important;
        min-height: 76px !important;
        height: 76px !important;
        max-height: 76px !important;
        padding: 8px 24px !important;
        align-items: center !important;
        font-size: 12.5px !important;
        line-height: 18px !important;
        letter-spacing: 0.1px !important;
        overflow: hidden !important;
    }

    body.of-body .of-flow-footer > .of-legal-footer__links,
    body.of-body .of-search-shell__footer > .of-legal-footer__links,
    body.of-body .of-results-shell__footer > .of-legal-footer__links,
    body.of-body .of-partner-detail__footer > .of-legal-footer__links,
    body.of-body .of-booking__footer > .of-legal-footer__links {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        column-gap: 7px !important;
        row-gap: 3px !important;
        line-height: 18px !important;
        white-space: normal !important;
        overflow: hidden !important;
    }

    body.of-body .of-legal-footer__separator {
        opacity: 0.9;
    }
}

@media (max-width: 390px) and (max-height: 700px) {
    body.of-body {
        --of-flow-footer-height: 68px !important;
    }

    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 {
        flex-basis: 68px !important;
        min-height: 68px !important;
        height: 68px !important;
        max-height: 68px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        font-size: 12px !important;
        line-height: 16px !important;
    }

    body.of-body .of-flow-footer > .of-legal-footer__links,
    body.of-body .of-search-shell__footer > .of-legal-footer__links,
    body.of-body .of-results-shell__footer > .of-legal-footer__links,
    body.of-body .of-partner-detail__footer > .of-legal-footer__links,
    body.of-body .of-booking__footer > .of-legal-footer__links {
        row-gap: 2px !important;
        line-height: 16px !important;
    }
}

/* Pass 11.71: mobile footer padding correction after client review.
   Keep the improved readability, but reduce horizontal padding to 15px. */
@media (max-width: 479px) {
    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-left: 15px !important;
        padding-right: 15px !important;
    }

    body.of-body .of-flow-footer > .of-legal-footer__links,
    body.of-body .of-search-shell__footer > .of-legal-footer__links,
    body.of-body .of-results-shell__footer > .of-legal-footer__links,
    body.of-body .of-partner-detail__footer > .of-legal-footer__links,
    body.of-body .of-booking__footer > .of-legal-footer__links {
        column-gap: 6px !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-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* Pass 11.72: final mobile footer horizontal padding correction.
   Keep all mobile footers on the same 15px horizontal grid. */
@media (max-width: 479px) {
    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-left: 15px !important;
        padding-right: 15px !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-left: 15px !important;
        padding-right: 15px !important;
    }
}


/* Pass 11.73: final mobile footer padding override.
   Keep mobile legal footer at 15px even when older canonical footer rules set 24px. */
@media (max-width: 479px) {
    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-left: 15px !important;
        padding-right: 15px !important;
        padding-inline: 15px !important;
    }
}

/* Pass 11.74: final mobile footer grid. Keep the legal footer on the 15px mobile rail. */
@media (max-width: 479px) {
    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,
    footer.of-flow-footer,
    footer.of-search-shell__footer,
    footer.of-results-shell__footer,
    footer.of-partner-detail__footer,
    footer.of-booking__footer {
        padding: 5px 15px !important;
        padding-inline: 15px !important;
    }
}

/* Pass 11.75: hard mobile legal footer rail.
   Keep footer links on the 15px mobile grid even if area-specific CSS sets 24px. */
@media (max-width: 479px) {
    html body.of-body #of-home-ctn .of-flow-footer,
    html body.of-body #of-home-ctn .of-search-shell__footer,
    html body.of-body #of-home-ctn .of-results-shell__footer,
    html body.of-body #of-home-ctn .of-partner-detail__footer,
    html body.of-body #of-home-ctn .of-booking__footer,
    html body.of-body #of-home-ctn footer.of-flow-footer,
    html body.of-body #of-home-ctn footer.of-search-shell__footer,
    html body.of-body #of-home-ctn footer.of-results-shell__footer,
    html body.of-body #of-home-ctn footer.of-partner-detail__footer,
    html body.of-body #of-home-ctn footer.of-booking__footer {
        padding-left: 15px !important;
        padding-right: 15px !important;
        padding-inline: 15px !important;
    }
}

/* Pass 18: mobile legal footer readability/click targets for public WEB pages. */
@media (max-width: 479px) {
    body.of-body .of-flow-footer,
    body.of-body .of-search-shell__footer {
        min-height: 96px !important;
        height: auto !important;
        max-height: none !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        overflow: visible !important;
    }

    body.of-body .of-flow-footer > .of-legal-footer__links,
    body.of-body .of-search-shell__footer > .of-legal-footer__links {
        column-gap: 8px !important;
        row-gap: 6px !important;
        font-size: 13px !important;
        line-height: 19px !important;
        overflow: visible !important;
    }

    body.of-body .of-flow-footer a,
    body.of-body .of-search-shell__footer a {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 24px !important;
        color: inherit !important;
        text-decoration: none !important;
        pointer-events: auto !important;
    }
}

/* 20260617 pass52: mobile WEB legal footer click targets.
   The legal footer stays in the page flow before the full-screen process and must remain readable/clickable on XS. */
@media (max-width: 479.98px) {
    body.of-body--web #of-home-ctn:not([data-current-step="damage"]):not([data-current-step="location"]):not([data-results-state="ready"]):not([data-results-state="empty"]):not([data-current-stage="partner-detail"]):not([data-current-stage="booking"]) .of-search-shell__footer,
    body.of-body--web #of-home-ctn:not([data-current-step="damage"]):not([data-current-step="location"]):not([data-results-state="ready"]):not([data-results-state="empty"]):not([data-current-stage="partner-detail"]):not([data-current-stage="booking"]) .of-flow-footer {
        position: static !important;
        display: flex !important;
        flex: 0 0 auto !important;
        min-height: 112px !important;
        height: auto !important;
        max-height: none !important;
        padding: 12px 15px !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        overflow: visible !important;
        font-size: 13.5px !important;
        line-height: 20px !important;
        letter-spacing: 0 !important;
        box-sizing: border-box !important;
    }

    body.of-body--web #of-home-ctn:not([data-current-step="damage"]):not([data-current-step="location"]):not([data-results-state="ready"]):not([data-results-state="empty"]):not([data-current-stage="partner-detail"]):not([data-current-stage="booking"]) .of-search-shell__footer > .of-legal-footer__links,
    body.of-body--web #of-home-ctn:not([data-current-step="damage"]):not([data-current-step="location"]):not([data-results-state="ready"]):not([data-results-state="empty"]):not([data-current-stage="partner-detail"]):not([data-current-stage="booking"]) .of-flow-footer > .of-legal-footer__links {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: none !important;
        gap: 8px 10px !important;
        margin: 0 !important;
        overflow: visible !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        font-size: inherit !important;
        line-height: inherit !important;
        box-sizing: border-box !important;
    }

    body.of-body--web #of-home-ctn:not([data-current-step="damage"]):not([data-current-step="location"]):not([data-results-state="ready"]):not([data-results-state="empty"]):not([data-current-stage="partner-detail"]):not([data-current-stage="booking"]) .of-search-shell__footer a,
    body.of-body--web #of-home-ctn:not([data-current-step="damage"]):not([data-current-step="location"]):not([data-results-state="ready"]):not([data-results-state="empty"]):not([data-current-stage="partner-detail"]):not([data-current-stage="booking"]) .of-flow-footer a {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 28px !important;
        padding: 2px 0 !important;
        color: inherit !important;
        text-decoration: none !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    body.of-body--web #of-home-ctn:not([data-current-step="damage"]):not([data-current-step="location"]):not([data-results-state="ready"]):not([data-results-state="empty"]):not([data-current-stage="partner-detail"]):not([data-current-stage="booking"]) .of-legal-footer__separator {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 28px !important;
        opacity: 0.75 !important;
        pointer-events: none !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: 24px;
    height: 24px;
    background-color: transparent;
    background-image: url("/Images/Flow/Icons/Icons_chevron-left-bg.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 24px 24px;
    clip-path: none;
}
.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: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    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: #0f3549;
    border-color: #0f3549;
}
.of-search-action--secondary {
    color: #0f3549;
    background: var(--of-surface-bg, #ffffff);
    border-color: #0f3549;
}
.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-main {
        width: 100%;
        min-height: 100dvh;
        padding: 0;
    }
    .of-home {
        width: 100%;
        min-height: 100dvh;
    }
    .of-home__search {
        position: relative;
        z-index: 20;
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: 100dvh;
        height: auto;
        max-height: none;
        grid-template-rows: none;
        overflow: visible;
        border-radius: 0;
    }
    .of-search-shell__header,
    .of-search-shell__body,
    .of-search-shell__footer {
        width: 100%;
        min-width: 0;
    }
    .of-search-shell__body {
        display: block;
        flex: 1 0 auto;
        min-height: auto;
        padding: 24px;
        overflow: visible;
    }
    .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 tablet/desktop search panel scrollable but hide the browser scrollbar. */
@media (min-width: 480px) {
    .of-search-shell__body {
        overflow-x: hidden;
        overflow-y: auto;
        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;
    }
}

/* 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;
}

@media (max-width: 479.98px) {
    .of-search-shell--step-title .of-search-shell__logo {
        font-size: var(--of-flow-mobile-header-title-size, 16px);
        line-height: var(--of-flow-mobile-header-title-line-height, 20px);
        letter-spacing: var(--of-flow-mobile-header-title-letter-spacing, 0.2px);
    }
}

/* 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 {
        min-height: 100dvh;
        height: auto;
        max-height: none;
    }

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

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

    .of-search-shell--step-title .of-search-shell__logo {
        font-size: var(--of-flow-mobile-header-title-size, 16px);
        line-height: var(--of-flow-mobile-header-title-line-height, 20px);
        letter-spacing: var(--of-flow-mobile-header-title-letter-spacing, 0.2px);
    }

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

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

    .of-search-shell__body {
        padding: 16px var(--of-flow-content-x);
        min-height: auto;
        overflow: visible;
    }

    .of-search-shell__footer {
        min-height: var(--of-flow-footer-height);
        height: auto;
        padding: 5px 14px;
        font-size: 13px;
        line-height: 16px;
    }
}

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

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

    .of-search-shell--step-title .of-search-shell__logo {
        font-size: var(--of-flow-mobile-header-title-size, 16px);
        line-height: var(--of-flow-mobile-header-title-line-height, 20px);
        letter-spacing: var(--of-flow-mobile-header-title-letter-spacing, 0.2px);
    }

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

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

/* 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%;
        max-width: 260px;
        min-width: 0;
        height: auto;
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
        justify-self: center;
    }
}

@media (max-width: 390px) and (max-height: 700px) {
    .of-search-shell--step-title .of-search-shell__logo {
        width: 100%;
        max-width: 260px;
        min-width: 0;
        height: auto;
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
    }
}

/* Desktop search/map base 2026-06-04 */
@media (min-width: 1280px) {
    .of-home__search {
        grid-template-rows: 96px minmax(0, 1fr) var(--of-flow-desktop-footer-height, 56px);
        background: var(--ayvens-theme-neutral-neutral-100, #f6f6f6);
        border-radius: 0;
        box-shadow: none;
    }

    .of-search-shell__header {
        grid-template-columns: 40px minmax(0, 1fr) 40px;
        min-height: 96px;
        padding: 0 var(--of-flow-desktop-panel-padding-x, 32px);
        background: var(--ayvens-theme-neutral-neutral-100, #f6f6f6);
    }

    .of-search-shell__logo {
        justify-self: start;
        width: 132px;
        height: 28px;
    }

    .of-search-shell--step-title .of-search-shell__logo {
        justify-self: center;
        max-width: 100%;
        font-size: 18px;
        line-height: 24px;
    }

    .of-search-shell__body {
        align-content: start;
        padding: 28px var(--of-flow-desktop-panel-padding-x, 32px) 24px;
        background: var(--ayvens-theme-neutral-neutral-100, #f6f6f6);
    }

    .of-search-flow {
        width: min(100%, var(--of-flow-desktop-search-content-width, 360px));
        margin: 0 auto;
    }

    .of-search-step {
        gap: 16px;
    }

    .of-search-shell__footer {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 40;
        display: flex;
        min-height: var(--of-flow-desktop-footer-height, 56px);
        height: var(--of-flow-desktop-footer-height, 56px);
        padding: 10px var(--of-flow-desktop-panel-padding-x, 32px);
        font-size: 13px;
        line-height: 16px;
        text-align: center;
    }
}

/* Desktop step vertical rhythm refinement 2026-06-06 v7. */
@media (min-width: 1280px) {
    #of-home-ctn .of-home__search {
        grid-template-rows: 78px minmax(0, 1fr) var(--of-flow-desktop-footer-height, 56px);
    }

    #of-home-ctn .of-search-shell__header {
        min-height: 78px;
        height: 78px;
    }

    #of-home-ctn .of-search-shell__body {
        align-content: start;
        padding-top: 12px;
        padding-bottom: 18px;
    }

    #of-home-ctn .of-search-flow,
    #of-home-ctn .of-search-step {
        align-content: start;
    }
}

/* Responsive header/footer shell v2 — explicit header states.
   Do not touch XS mobile. S gets the mobile-expanded shell. M+ spans header/footer across search + map. */
@media (min-width: 480px) and (max-width: 739px) {
    .of-home__search {
        display: flex;
        flex-direction: column;
        min-height: 100dvh;
        height: auto;
        border-radius: 0;
    }

    .of-search-shell__header {
        grid-template-columns: 34px minmax(0, 1fr) 34px;
        min-height: var(--of-flow-header-height, 88px);
        height: var(--of-flow-header-height, 88px);
        padding: 0 24px;
        background: var(--ayvens-theme-neutral-neutral-white, #ffffff);
    }

    .of-search-shell:not(.of-search-shell--step-title) .of-search-shell__back {
        display: inline-flex;
        grid-column: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .of-search-shell:not(.of-search-shell--step-title) .of-search-shell__logo {
        grid-column: 2;
        justify-self: center;
        width: 132px;
        height: 28px;
    }

    .of-search-shell:not(.of-search-shell--step-title) .of-search-shell__header-spacer {
        grid-column: 3;
    }

    .of-search-shell--step-title .of-search-shell__header {
        grid-template-columns: 34px minmax(0, 1fr) 34px;
    }

    .of-search-shell--step-title .of-search-shell__back {
        display: inline-flex;
        grid-column: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .of-search-shell--step-title .of-search-shell__logo {
        grid-column: 2;
        justify-self: center;
        width: 100%;
        max-width: 320px;
        height: auto;
        font-size: var(--of-flow-mobile-header-title-size, 16px);
        line-height: var(--of-flow-mobile-header-title-line-height, 20px);
        letter-spacing: var(--of-flow-mobile-header-title-letter-spacing, 0.2px);
    }

    .of-search-shell--step-title .of-search-shell__header-spacer {
        grid-column: 3;
    }

    .of-search-shell__body {
        flex: 1 1 auto;
        min-height: 0;
        padding: 28px 48px 24px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .of-search-flow {
        width: min(100%, 360px);
        margin: 0 auto;
    }

    .of-search-shell__footer {
        display: flex;
        min-height: 64px;
        height: auto;
        flex-shrink: 0;
        padding: 10px 24px;
        font-size: 13px;
        line-height: 16px;
    }
}

@media (min-width: 740px) {
    .of-home__search {
        grid-template-rows: none;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .of-search-shell__header {
        grid-column: 1 / -1;
        grid-row: 1;
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) 40px;
        align-items: center;
        min-height: var(--of-responsive-shell-header-height, 64px);
        height: var(--of-responsive-shell-header-height, 64px);
        width: 100%;
        padding: 0 24px;
        background: var(--ayvens-theme-neutral-neutral-white, #ffffff);
        border-bottom: 1px solid rgba(15, 53, 73, 0.08);
        box-sizing: border-box;
    }

    .of-search-shell:not(.of-search-shell--step-title) .of-search-shell__back {
        display: inline-flex;
        grid-column: 1;
        width: 40px;
        height: 40px;
        visibility: visible;
        pointer-events: auto;
    }

    .of-search-shell:not(.of-search-shell--step-title) .of-search-shell__logo {
        grid-column: 2;
        justify-self: center;
        width: 132px;
        height: 28px;
    }

    .of-search-shell:not(.of-search-shell--step-title) .of-search-shell__header-spacer {
        grid-column: 3;
        justify-self: end;
        width: 40px;
        height: 40px;
    }

    .of-search-shell--step-title .of-search-shell__header {
        grid-template-columns: 40px minmax(0, 1fr) 40px;
    }

    .of-search-shell--step-title .of-search-shell__back {
        display: inline-flex;
        grid-column: 1;
        width: 40px;
        height: 40px;
        visibility: visible;
        pointer-events: auto;
    }

    .of-search-shell--step-title .of-search-shell__logo {
        grid-column: 2;
        justify-self: center;
        width: 100%;
        max-width: 420px;
        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: var(--of-flow-mobile-header-title-size, 16px);
        font-weight: 700;
        line-height: var(--of-flow-mobile-header-title-line-height, 20px);
        letter-spacing: var(--of-flow-mobile-header-title-letter-spacing, 0.2px);
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-indent: 0;
        background-image: none;
    }

    .of-search-shell--step-title .of-search-shell__header-spacer {
        grid-column: 3;
        justify-self: end;
        width: 40px;
        height: 40px;
    }

    .of-search-shell__body {
        grid-column: 1;
        grid-row: 2;
        align-content: start;
        width: 100%;
        min-width: 0;
        min-height: 0;
        height: 100%;
        padding: 24px 20px;
        overflow-x: hidden;
        overflow-y: auto;
        background: var(--ayvens-theme-neutral-neutral-100, #f6f6f6);
        box-sizing: border-box;
    }

    .of-search-flow {
        width: min(100%, 320px);
        margin: 0 auto;
    }

    .of-search-shell__footer {
        grid-column: 1 / -1;
        grid-row: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: var(--of-responsive-shell-footer-height, 32px);
        height: var(--of-responsive-shell-footer-height, 32px);
        padding: 6px 24px;
        font-size: 13px;
        line-height: 16px;
        text-align: center;
        background: var(--ayvens-theme-brand-secondary-400, #0f3549);
        box-sizing: border-box;
    }
}

@media (min-width: 960px) {
    .of-search-shell__header {
        padding: 0 32px;
    }

    .of-search-shell__body {
        padding: 28px 32px 24px;
    }

    .of-search-flow {
        width: min(100%, var(--of-flow-desktop-search-content-width, 360px));
    }

    .of-search-shell__footer {
        padding-right: 32px;
        padding-left: 32px;
    }
}

/* Pass 10.5: tablet portrait polish for T1/T2/T4 without changing the validated header/footer shell. */
@media (min-width: 740px) and (max-width: 959px) {
    .of-search-shell__body {
        padding: 28px 22px 24px;
    }

    .of-search-flow {
        width: min(100%, 316px);
        margin: 0 auto;
    }

    .of-search-step {
        gap: 14px;
    }

    .of-search-action {
        min-height: 44px;
        padding: 10px 22px;
        font-size: 15px;
        line-height: 20px;
    }
}

/* Pass 10.11-v2.3: stabilize brand logo size on mobile-expanded and align logo left from tablet. */
@media (min-width: 391px) and (max-width: 739px) {
    .of-search-shell:not(.of-search-shell--step-title) .of-search-shell__logo {
        width: 128px;
        height: 26px;
    }
}

@media (min-width: 740px) {
    .of-search-shell:not(.of-search-shell--step-title) .of-search-shell__header {
        grid-template-columns: 40px auto minmax(0, 1fr);
    }

    .of-search-shell:not(.of-search-shell--step-title) .of-search-shell__back {
        grid-column: 1;
        justify-self: start;
    }

    .of-search-shell:not(.of-search-shell--step-title) .of-search-shell__logo {
        grid-column: 2;
        justify-self: start;
        width: 132px;
        height: 28px;
    }

    .of-search-shell:not(.of-search-shell--step-title) .of-search-shell__header-spacer {
        grid-column: 3;
        justify-self: end;
    }
}


/* Pass 10.94: screen-local legal footer alignment override.
   Keep footer text position identical to the shared footer: 24px from the left and right. */
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;
    padding-left: 24px !important;
    padding-right: 24px !important;
    text-align: left !important;
    box-sizing: border-box !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 {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}


/* Pass 10.95: canonical footer size for all non-desktop shells.
   Text position and footer height now match across map, detail, search and booking. */
@media (max-width: 1279px) {
    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 {
        flex: 0 0 var(--of-flow-footer-height, 52px) !important;
        min-height: var(--of-flow-footer-height, 52px) !important;
        height: var(--of-flow-footer-height, 52px) !important;
        max-height: var(--of-flow-footer-height, 52px) !important;
        padding: 5px 24px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        font-size: 11.5px !important;
        line-height: 14px !important;
        letter-spacing: 0.15px !important;
        text-align: left !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;
        margin: 0 !important;
        white-space: normal !important;
        overflow: hidden !important;
        overflow-wrap: anywhere !important;
        text-align: left !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 {
        flex-basis: var(--of-flow-footer-height, 46px) !important;
        min-height: var(--of-flow-footer-height, 46px) !important;
        height: var(--of-flow-footer-height, 46px) !important;
        max-height: var(--of-flow-footer-height, 46px) !important;
        padding: 3px 24px !important;
        font-size: 10.5px !important;
        line-height: 13px !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 {
        line-height: 13px !important;
    }
}


/* Pass 10.96: fixed non-desktop footer height and stable legal-copy alignment.
   Tablet was inheriting the 88px mobile-flow token; force the same compact footer everywhere below desktop. */
@media (max-width: 1279px) {
    body.of-body {
        --of-flow-footer-height: 52px !important;
    }

    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 {
        flex: 0 0 52px !important;
        min-height: 52px !important;
        height: 52px !important;
        max-height: 52px !important;
        padding: 5px 24px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
        color: #ffffff !important;
        background: var(--of-flow-brand-color, #0f3549) !important;
        font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif) !important;
        font-size: 11.5px !important;
        font-weight: 400 !important;
        line-height: 14px !important;
        letter-spacing: 0.15px !important;
        text-align: left !important;
        box-sizing: border-box !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;
        min-width: 0 !important;
        margin: 0 !important;
        color: inherit !important;
        text-align: left !important;
        white-space: normal !important;
        overflow: hidden !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        line-height: 14px !important;
        box-sizing: border-box !important;
    }

    body.of-body .of-flow-footer a,
    body.of-body .of-search-shell__footer a,
    body.of-body .of-results-shell__footer a,
    body.of-body .of-partner-detail__footer a,
    body.of-body .of-booking__footer a {
        color: inherit !important;
        text-decoration: none !important;
    }
}

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

    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 {
        flex-basis: 46px !important;
        min-height: 46px !important;
        height: 46px !important;
        max-height: 46px !important;
        padding: 3px 24px !important;
        font-size: 10.5px !important;
        line-height: 13px !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 {
        line-height: 13px !important;
    }
}


/* Pass 10.97: restore tablet footer to the responsive shell size.
   Tablet footer is 32px like the original responsive shell; mobile keeps the 52/46px mobile footer. */
@media (min-width: 480px) and (max-width: 1279px) {
    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 {
        flex: 0 0 var(--of-responsive-shell-footer-height, 32px) !important;
        min-height: var(--of-responsive-shell-footer-height, 32px) !important;
        height: var(--of-responsive-shell-footer-height, 32px) !important;
        max-height: var(--of-responsive-shell-footer-height, 32px) !important;
        padding: 6px 24px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
        color: #ffffff !important;
        background: var(--of-flow-brand-color, #0f3549) !important;
        font-size: 10.5px !important;
        line-height: 13px !important;
        letter-spacing: 0.15px !important;
        text-align: left !important;
        box-sizing: border-box !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;
        min-width: 0 !important;
        margin: 0 !important;
        color: inherit !important;
        text-align: left !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: clip !important;
        line-height: 13px !important;
        box-sizing: border-box !important;
    }

    body.of-body .of-flow-footer a,
    body.of-body .of-search-shell__footer a,
    body.of-body .of-results-shell__footer a,
    body.of-body .of-partner-detail__footer a,
    body.of-body .of-booking__footer a {
        color: inherit !important;
        text-decoration: none !important;
    }
}

/* Pass 11.18: mobile search header height restored; service title only gets a small font bump. */
@media (max-width: 479.98px) {
    body.of-body .of-home__search {
        grid-template-rows: var(--of-flow-header-height, 60px) minmax(0, 1fr) var(--of-flow-footer-height, 52px) !important;
    }

    body.of-body .of-search-shell__header,
    body.of-body .of-search-shell--step-title .of-search-shell__header {
        grid-template-columns: 32px minmax(0, 1fr) 32px !important;
        min-height: var(--of-flow-header-height, 60px) !important;
        height: var(--of-flow-header-height, 60px) !important;
        max-height: var(--of-flow-header-height, 60px) !important;
        padding: 0 18px !important;
        box-sizing: border-box !important;
    }

    body.of-body .of-search-shell:not(.of-search-shell--step-title) .of-search-shell__logo {
        width: 128px !important;
        height: 26px !important;
    }

    body.of-body .of-search-shell--step-title .of-search-shell__logo {
        width: 100% !important;
        max-width: 260px !important;
        height: auto !important;
        font-size: var(--of-flow-mobile-header-title-size, 18px) !important;
        line-height: var(--of-flow-mobile-header-title-line-height, 23px) !important;
        letter-spacing: var(--of-flow-mobile-header-title-letter-spacing, 0.3px) !important;
    }

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

/* Pass 11.28: tablet header service title typography standard. */
@media (min-width: 740px) and (max-width: 1199px) {
    .of-search-shell--step-title .of-search-shell__logo {
        justify-self: center !important;
        color: var(--ayvens-theme-brand-secondary-400, #0f3549) !important;
        font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif) !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 20px !important;
        letter-spacing: 0.2px !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        background-image: none !important;
    }
}

/* Pass 11.29: tablet search step title vertical centering. */
@media (min-width: 740px) and (max-width: 1199px) {
    body.of-body .of-search-shell--step-title .of-search-shell__header {
        align-items: center !important;
    }

    body.of-body .of-search-shell--step-title .of-search-shell__logo {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 20px !important;
        letter-spacing: 0.2px !important;
        text-align: center !important;
        transform: none !important;
        box-sizing: border-box !important;
    }
}

/* Pass 11.30: tablet search header title exact vertical centering like results. */
@media (min-width: 740px) and (max-width: 1199px) {
    body.of-body .of-search-shell--step-title .of-search-shell__header {
        position: relative !important;
        display: grid !important;
        align-items: center !important;
    }

    body.of-body .of-search-shell--step-title .of-search-shell__logo {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 112px) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 20px !important;
        letter-spacing: 0.2px !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        background-image: none !important;
        box-sizing: border-box !important;
    }
}

/* Pass 11.31: tablet search header title raised to match results header. */
@media (min-width: 740px) and (max-width: 1199px) {
    body.of-body .of-search-shell--step-title .of-search-shell__logo {
        top: calc(50% - 3px) !important;
        transform: translateX(-50%) !important;
    }
}

/* Pass 11.32: tablet search header title raised without losing vertical centering. */
@media (min-width: 740px) and (max-width: 1199px) {
    body.of-body .of-search-shell--step-title .of-search-shell__logo {
        top: 50% !important;
        transform: translate(-50%, calc(-50% - 4px)) !important;
    }
}

/* Pass 11.35: XL search step header title no drop. */
@media (min-width: 1280px) {
    body.of-body #of-home-ctn .of-search-shell--step-title .of-search-shell__header {
        position: relative !important;
        display: grid !important;
        align-items: center !important;
    }

    body.of-body #of-home-ctn .of-search-shell--step-title .of-search-shell__logo {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, calc(-50% - 4px)) !important;
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 112px) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--ayvens-theme-brand-secondary-400, #0f3549) !important;
        font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif) !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 20px !important;
        letter-spacing: 0.2px !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        background: none !important;
        background-image: none !important;
        box-sizing: border-box !important;
    }
}

/* Pass 11.37: canonical tablet/desktop service header title alignment. */
@media (min-width: 740px) {
    body.of-body #of-home-ctn {
        --of-canonical-service-header-height: 64px;
        --of-canonical-service-title-size: 16px;
        --of-canonical-service-title-line-height: 20px;
        --of-canonical-service-title-letter-spacing: 0.2px;
    }

    body.of-body #of-home-ctn .of-search-shell--step-title .of-search-shell__header,
    body.of-body #of-home-ctn[data-results-state="ready"] .of-results-shell__header,
    body.of-body #of-home-ctn[data-results-state="empty"] .of-results-shell__header,
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__header,
    body.of-body #of-home-ctn[data-current-stage="booking"] > #of-booking-panel.of-booking .of-booking__header {
        position: relative !important;
        min-height: var(--of-canonical-service-header-height) !important;
        height: var(--of-canonical-service-header-height) !important;
        max-height: var(--of-canonical-service-header-height) !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    body.of-body #of-home-ctn .of-search-shell--step-title .of-search-shell__logo,
    body.of-body #of-home-ctn[data-results-state="ready"] .of-results-shell__title,
    body.of-body #of-home-ctn[data-results-state="empty"] .of-results-shell__title,
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__title,
    body.of-body #of-home-ctn[data-current-stage="booking"] > #of-booking-panel.of-booking .of-booking__title {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100vw - 144px) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--ayvens-theme-brand-secondary-400, #0f3549) !important;
        font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif) !important;
        font-size: var(--of-canonical-service-title-size) !important;
        font-weight: 700 !important;
        line-height: var(--of-canonical-service-title-line-height) !important;
        letter-spacing: var(--of-canonical-service-title-letter-spacing) !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-indent: 0 !important;
        background: none !important;
        background-image: none !important;
        box-sizing: border-box !important;
    }

    body.of-body #of-home-ctn[data-results-state="ready"] .of-results-shell__heading,
    body.of-body #of-home-ctn[data-results-state="empty"] .of-results-shell__heading {
        position: static !important;
        display: block !important;
        width: auto !important;
        height: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Pass 11.40: AppDriver damage start has no back affordance. */
#of-home-ctn[data-start-step="damage"][data-current-step="damage"] #of-search-panel[data-access-from="APP-DRIVER"] .of-search-shell__back,
#of-home-ctn[data-start-step="damage"][data-current-step="damage"] #of-search-panel[data-access-from="APP-DRIVER"] #of-search-damage-step > .of-search-actions .of-search-back-btn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Pass 11.41: AppDriver mobile search owns no internal header. */
@media (max-width: 479.98px) {
    body.of-body #of-search-panel[data-access-from="APP-DRIVER"] {
        grid-template-rows: minmax(0, 1fr) var(--of-flow-footer-height, 52px) !important;
    }

    body.of-body #of-search-panel[data-access-from="APP-DRIVER"] .of-search-shell__header {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    body.of-body #of-search-panel[data-access-from="APP-DRIVER"] .of-search-shell__body {
        grid-row: 1 !important;
        min-height: 0 !important;
        padding-top: 24px !important;
    }
}


/* Pass 11.47: client feedback - align the first-step Ayvens logo with the content column. */
#of-home-ctn[data-current-step="plate"] .of-search-shell__header {
    grid-template-columns: minmax(0, 1fr) !important;
    padding-left: var(--of-flow-content-x, 35px) !important;
    padding-right: var(--of-flow-content-x, 35px) !important;
}

#of-home-ctn[data-current-step="plate"] .of-search-shell__logo {
    justify-self: start !important;
    background-position: left center !important;
}

#of-home-ctn[data-current-step="plate"] .of-search-shell__back,
#of-home-ctn[data-current-step="plate"] .of-search-shell__header-spacer {
    display: none !important;
}

@media (min-width: 480px) and (max-width: 739px) {
    #of-home-ctn[data-current-step="plate"] .of-search-shell__header {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

@media (min-width: 740px) and (max-width: 1279px) {
    #of-home-ctn[data-current-step="plate"] .of-search-shell__header {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

@media (min-width: 1280px) {
    #of-home-ctn[data-current-step="plate"] .of-search-shell__header {
        padding-left: var(--of-flow-desktop-panel-padding-x, 24px) !important;
        padding-right: var(--of-flow-desktop-panel-padding-x, 24px) !important;
    }
}


/* Pass 42: WEB mobile search scroll/transition contract.
   Before results, the footer stays in the page flow and the page can scroll.
   After results, the search shell must disappear so the map/results shell owns the viewport. */
@media (max-width: 479.98px) {
    body.of-body--web:has(#of-home-ctn[data-current-stage="search"]:not([data-results-state="ready"]):not([data-results-state="empty"])) {
        height: auto !important;
        min-height: 100dvh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body.of-body--web:has(#of-home-ctn[data-current-stage="search"][data-results-state="ready"]),
    body.of-body--web:has(#of-home-ctn[data-current-stage="search"][data-results-state="empty"]),
    body.of-body--web:has(#of-home-ctn[data-current-stage="partner-detail"]),
    body.of-body--web:has(#of-home-ctn[data-current-stage="booking"]) {
        height: 100% !important;
        overflow: hidden !important;
    }

    body.of-body--web #of-home-ctn[data-current-stage="search"]:not([data-results-state="ready"]):not([data-results-state="empty"]) > #of-search-panel.of-home__search {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-height: 100dvh !important;
        height: auto !important;
        max-height: none !important;
        grid-template-rows: none !important;
        overflow: visible !important;
        border-radius: 0 !important;
    }

    body.of-body--web #of-home-ctn[data-current-stage="search"]:not([data-results-state="ready"]):not([data-results-state="empty"]) > #of-search-panel.of-home__search .of-search-shell__header {
        flex: 0 0 auto !important;
    }

    body.of-body--web #of-home-ctn[data-current-stage="search"]:not([data-results-state="ready"]):not([data-results-state="empty"]) > #of-search-panel.of-home__search .of-search-shell__body {
        display: block !important;
        flex: 1 0 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        -webkit-overflow-scrolling: auto;
    }

    body.of-body--web #of-home-ctn[data-current-stage="search"]:not([data-results-state="ready"]):not([data-results-state="empty"]) > #of-search-panel.of-home__search .of-search-shell__footer {
        position: static !important;
        display: flex !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        min-height: var(--of-flow-footer-height, 52px) !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    body.of-body--web #of-home-ctn[data-current-stage="search"][data-results-state="ready"] > #of-search-panel.of-home__search,
    body.of-body--web #of-home-ctn[data-current-stage="search"][data-results-state="empty"] > #of-search-panel.of-home__search {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !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;
}

/* Pass 10.5: tablet portrait T1 polish. */
@media (min-width: 740px) and (max-width: 959px) {
    #of-home-ctn[data-current-step="plate"] .of-search-plate-content {
        width: 100%;
        max-width: 316px;
    }

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

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

    #of-home-ctn[data-current-step="plate"] .of-search-plate-info {
        max-width: 316px;
        margin-bottom: 32px;
    }

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

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


/* Pass 11.55: equal CTA width without forcing the whole search column.
   The action group sizes itself from the natural secondary button width;
   both buttons then stretch to that same track and keep the arrow aligned. */
#of-search-plate-step .of-search-plate-actions {
    display: inline-grid !important;
    grid-template-columns: minmax(0, max-content) !important;
    justify-self: center !important;
    justify-items: stretch !important;
    width: auto !important;
    max-width: 100% !important;
}

#of-search-plate-step .of-search-plate-action--primary,
#of-search-plate-step .of-search-plate-action--secondary {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-left: 34px !important;
    padding-right: 48px !important;
    justify-content: center !important;
    gap: 0 !important;
}

#of-search-plate-step .of-search-plate-action--primary::after,
#of-search-plate-step .of-search-plate-action--secondary::after {
    position: absolute !important;
    right: 24px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}

@media (max-width: 390px) {
    #of-search-plate-step .of-search-plate-action--primary,
    #of-search-plate-step .of-search-plate-action--secondary {
        padding-left: 28px !important;
        padding-right: 42px !important;
    }

    #of-search-plate-step .of-search-plate-action--primary::after,
    #of-search-plate-step .of-search-plate-action--secondary::after {
        right: 20px !important;
    }
}


/* Pass 38: show processing state immediately after clicking vehicle validation actions. */
#of-search-plate-step .of-search-action--resolving,
#of-search-mandatory-plate-step .of-search-action--resolving {
    position: relative;
    display: flex;
    padding: 12px 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: var(--ayvens-theme-neutral-neutral-white, #ffffff);
    text-align: center;
    font-family: Chillax, var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 17px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    background: var(--ayvens-theme-brand-secondary-300, #3F5D6D) !important;
    border-color: var(--ayvens-theme-brand-secondary-300, #3F5D6D) !important;
    border-radius: 30px;
    cursor: wait;
    pointer-events: none;
}

#of-search-plate-step .of-search-action--resolving::before,
#of-search-mandatory-plate-step .of-search-action--resolving::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    background: url("/Images/Flow/Icons/loaderframeabsolute.svg") center / 24px 24px no-repeat;
    animation: of-vehicle-button-loader-spin 760ms linear infinite;
}

@keyframes of-vehicle-button-loader-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/* Pass 39: loading state is a centered spinner-only pill, matching Figma/Velocity. */
#of-search-plate-step .of-search-action--resolving,
#of-search-mandatory-plate-step .of-search-action--resolving {
    position: relative;
    color: transparent !important;
    background: var(--ayvens-theme-brand-secondary-300, #3F5D6D) !important;
    border-color: var(--ayvens-theme-brand-secondary-300, #3F5D6D) !important;
    cursor: wait;
    pointer-events: none;
}

#of-search-plate-step .of-search-action--resolving > *,
#of-search-mandatory-plate-step .of-search-action--resolving > * {
    opacity: 0 !important;
}

#of-search-plate-step .of-search-action--resolving::before,
#of-search-mandatory-plate-step .of-search-action--resolving::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    background: url("/Images/Flow/Icons/loaderframeabsolute.svg") center / 24px 24px no-repeat;
    border: 0 !important;
    transform: translate(-50%, -50%);
    animation: of-vehicle-button-loader-spin-centered 760ms linear infinite;
}

@keyframes of-vehicle-button-loader-spin-centered {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 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;
    }
}

/* Desktop service step vertical rhythm refinement 2026-06-06 v7. */
@media (min-width: 1280px) {
    #of-home-ctn[data-current-step="service"] .of-search-service-content {
        gap: 16px;
    }

    #of-home-ctn[data-current-step="service"] .of-search-service-intro {
        gap: 8px;
    }

    #of-home-ctn[data-current-step="service"] .of-search-services {
        gap: 16px;
    }
}

/* Pass 10.5: tablet portrait T2 polish. */
@media (min-width: 740px) and (max-width: 959px) {
    #of-home-ctn[data-current-step="service"] .of-search-service-content {
        width: 100%;
        max-width: 316px;
        gap: 16px;
    }

    #of-home-ctn[data-current-step="service"] .of-search-service-intro {
        gap: 8px;
    }

    #of-home-ctn[data-current-step="service"] .of-search-services {
        gap: 16px;
    }

    #of-home-ctn[data-current-step="service"] .of-search-service-group {
        gap: 8px;
    }

    #of-home-ctn[data-current-step="service"] .of-search-service__description.of-flow-list-item__description {
        font-size: 11.5px;
        line-height: 14px;
    }
}

/* Pass 10.14: services remain visually available without plate; mandatory plate is handled after click. */
.of-search-service--disabled {
    color: inherit;
    background: #ffffff;
    border-color: #d6dbe1;
    cursor: pointer;
    opacity: 1;
}

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

.of-search-service__disabled-reason {
    display: none !important;
}


/* Pass 11.10 / follow-up 2: normalize service pictograms by compensating each SVG viewBox whitespace. */
.of-search-service__symbol.of-flow-list-item__icon {
    width: 36px;
    height: 36px;
}

.of-search-service__symbol.of-flow-list-item__icon::before {
    width: 36px;
    height: 36px;
    background-color: currentColor;
    -webkit-mask-size: 32px 32px;
    mask-size: 32px 32px;
}

.of-search-service__symbol.of-flow-icon--quick::before {
    -webkit-mask-size: 40px 40px;
    mask-size: 40px 40px;
}

.of-search-service__symbol.of-flow-icon--maintenance::before,
.of-search-service__symbol.of-flow-icon--breakdown::before {
    -webkit-mask-size: 26px 26px;
    mask-size: 26px 26px;
}

.of-search-service__symbol.of-flow-icon--collision::before,
.of-search-service__symbol.of-flow-icon--tyres::before {
    -webkit-mask-size: 37px 37px;
    mask-size: 37px 37px;
}

.of-search-service__symbol.of-flow-icon--glass::before {
    -webkit-mask-size: 37px 37px;
    mask-size: 37px 37px;
}

.of-search-service__symbol.of-flow-icon--rent::before,
.of-search-service__symbol.of-flow-icon--inspection::before,
.of-search-service__symbol.of-flow-icon--return::before {
    -webkit-mask-size: 33px 33px;
    mask-size: 33px 33px;
}

@media (max-width: 390px) {
    .of-search-service__symbol.of-flow-list-item__icon {
        width: 30px !important;
        height: 30px !important;
    }

    .of-search-service__symbol.of-flow-list-item__icon::before {
        width: 30px !important;
        height: 30px !important;
        -webkit-mask-size: 27px 27px !important;
        mask-size: 27px 27px !important;
    }

    .of-search-service__symbol.of-flow-icon--quick::before {
        -webkit-mask-size: 33px 33px !important;
        mask-size: 33px 33px !important;
    }

    .of-search-service__symbol.of-flow-icon--maintenance::before,
    .of-search-service__symbol.of-flow-icon--breakdown::before {
        -webkit-mask-size: 22px 22px !important;
        mask-size: 22px 22px !important;
    }

    .of-search-service__symbol.of-flow-icon--collision::before,
    .of-search-service__symbol.of-flow-icon--tyres::before,
    .of-search-service__symbol.of-flow-icon--glass::before {
        -webkit-mask-size: 31px 31px !important;
        mask-size: 31px 31px !important;
    }

    .of-search-service__symbol.of-flow-icon--rent::before,
    .of-search-service__symbol.of-flow-icon--inspection::before,
    .of-search-service__symbol.of-flow-icon--return::before {
        -webkit-mask-size: 28px 28px !important;
        mask-size: 28px 28px !important;
    }
}

/* Pass 11.20: tablet service intro density for larger visible search area. */
@media (min-width: 740px) and (max-width: 1199px) {
    #of-home-ctn[data-current-step="service"] .of-search-shell__body {
        padding-top: 16px !important;
        padding-bottom: 18px !important;
    }

    #of-home-ctn[data-current-step="service"] .of-search-service-content {
        gap: 12px !important;
    }

    #of-home-ctn[data-current-step="service"] .of-search-service-intro {
        gap: 6px !important;
    }

    #of-home-ctn[data-current-step="service"] .of-search-service__title {
        font-size: 18px !important;
        line-height: 24px !important;
        letter-spacing: 0.45px !important;
        margin: 0 !important;
    }

    #of-home-ctn[data-current-step="service"] .of-search-service__description {
        font-size: 15px !important;
        line-height: 21px !important;
        letter-spacing: 0.3px !important;
        margin: 0 !important;
    }

    #of-home-ctn[data-current-step="service"] .of-search-services {
        gap: 12px !important;
    }

    #of-home-ctn[data-current-step="service"] .of-search-service-group {
        gap: 8px !important;
    }

    #of-home-ctn[data-current-step="service"] .of-search-service-vehicle-summary {
        margin-bottom: 2px !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;
}


/* Pass 38: show processing state immediately after clicking mandatory vehicle validation action. */
#of-search-plate-step .of-search-action--resolving,
#of-search-mandatory-plate-step .of-search-action--resolving {
    position: relative;
    display: flex;
    padding: 12px 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: var(--ayvens-theme-neutral-neutral-white, #ffffff);
    text-align: center;
    font-family: Chillax, var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 17px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    background: var(--ayvens-theme-brand-secondary-300, #3F5D6D) !important;
    border-color: var(--ayvens-theme-brand-secondary-300, #3F5D6D) !important;
    border-radius: 30px;
    cursor: wait;
    pointer-events: none;
}

#of-search-plate-step .of-search-action--resolving::before,
#of-search-mandatory-plate-step .of-search-action--resolving::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    background: url("/Images/Flow/Icons/loaderframeabsolute.svg") center / 24px 24px no-repeat;
    animation: of-vehicle-button-loader-spin 760ms linear infinite;
}

@keyframes of-vehicle-button-loader-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/* Pass 39: loading state is a centered spinner-only pill, matching Figma/Velocity. */
#of-search-plate-step .of-search-action--resolving,
#of-search-mandatory-plate-step .of-search-action--resolving {
    position: relative;
    color: transparent !important;
    background: var(--ayvens-theme-brand-secondary-300, #3F5D6D) !important;
    border-color: var(--ayvens-theme-brand-secondary-300, #3F5D6D) !important;
    cursor: wait;
    pointer-events: none;
}

#of-search-plate-step .of-search-action--resolving > *,
#of-search-mandatory-plate-step .of-search-action--resolving > * {
    opacity: 0 !important;
}

#of-search-plate-step .of-search-action--resolving::before,
#of-search-mandatory-plate-step .of-search-action--resolving::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    background: url("/Images/Flow/Icons/loaderframeabsolute.svg") center / 24px 24px no-repeat;
    border: 0 !important;
    transform: translate(-50%, -50%);
    animation: of-vehicle-button-loader-spin-centered 760ms linear infinite;
}

@keyframes of-vehicle-button-loader-spin-centered {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 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: 18px;
}

/* 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;
}

/* Desktop revision damage step vertical rhythm refinement 2026-06-06 v7. */
@media (min-width: 1280px) {
    #of-home-ctn[data-current-step="damage"] .of-search-damage-content {
        gap: 16px;
    }

    #of-home-ctn[data-current-step="damage"] .of-search-damage-intro {
        gap: 8px;
    }

    #of-home-ctn[data-current-step="damage"] .of-search-damage-field,
    #of-home-ctn[data-current-step="damage"] .of-search-damage-description-field {
        gap: 6px;
    }

    #of-home-ctn[data-current-step="damage"] .of-search-damage-choice {
        min-height: 48px;
    }

    #of-home-ctn[data-current-step="damage"] .of-search-damage-actions {
        padding-top: 18px;
    }
}

/* 20260617 pass57: revision damage CTA matches the radio choice width and never renders a chevron. */
#of-home-ctn[data-current-step="damage"] .of-search-damage-actions {
    width: 100%;
    justify-items: stretch;
}

#of-home-ctn[data-current-step="damage"] #of-search-damage-continue-btn {
    width: 100%;
    max-width: none;
}

#of-home-ctn[data-current-step="damage"] #of-search-damage-continue-btn::before,
#of-home-ctn[data-current-step="damage"] #of-search-damage-continue-btn::after {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    content: none !important;
}

/* Pré-inspeção / Devolução service choice step. */

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

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

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

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

.of-search-return-service__title,
.of-search-return-service__subtitle {
    margin: 0;
}

.of-search-return-service__subtitle {
    max-width: 330px;
}

.of-search-return-service-field {
    gap: 8px;
}

.of-search-return-service-choice-group {
    gap: 8px;
}

.of-search-return-service-choice {
    align-items: start;
    min-height: 0;
    padding-top: 16px;
    padding-bottom: 16px;
}

.of-search-return-service-choice .of-flow-choice-card__radio {
    margin-top: 4px;
}

.of-search-return-service-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-return-service-choice__text {
    display: grid;
    gap: 6px;
}

.of-search-return-service-choice__label {
    color: var(--of-flow-brand-color, #0f3549);
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 17px;
    font-weight: 600;
    line-height: 24px;
}

.of-search-return-service-choice__copy {
    color: var(--of-text, #16212f);
    font-family: var(--of-font-family-form, "Source Sans 3", Arial, Helvetica, sans-serif);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.of-search-return-service-actions {
    width: 100%;
    padding-top: 18px;
    justify-items: stretch;
}

#of-home-ctn[data-current-step="return-service"] #of-search-return-service-continue-btn {
    width: 100%;
    max-width: none;
}

#of-home-ctn[data-current-step="return-service"] #of-search-return-service-continue-btn::before,
#of-home-ctn[data-current-step="return-service"] #of-search-return-service-continue-btn::after {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    content: none !important;
}

#of-search-return-service-step .of-search-back-btn,
#of-search-return-service-step [data-search-back="true"] {
    display: none !important;
}

@media (min-width: 1280px) {
    #of-home-ctn[data-current-step="return-service"] .of-search-return-service-content {
        gap: 16px;
    }

    #of-home-ctn[data-current-step="return-service"] .of-search-return-service-intro {
        gap: 8px;
    }

    #of-home-ctn[data-current-step="return-service"] .of-search-return-service-field {
        gap: 6px;
    }

    #of-home-ctn[data-current-step="return-service"] .of-search-return-service-actions {
        padding-top: 18px;
    }
}

/* 20260701 PRD-008: Pré-inspeção/Devolução direct search must show the same active loader on Próximo. */
body.of-body #of-home-ctn[data-current-step="return-service"] #of-search-return-service-continue-btn.of-search-button--loading,
body.of-body #of-home-ctn[data-current-step="return-service"] #of-search-return-service-continue-btn.of-search-button--loading:disabled,
body.of-body #of-home-ctn[data-current-step="return-service"] #of-search-return-service-continue-btn.of-search-button--loading[disabled],
body.of-body #of-home-ctn[data-current-step="return-service"] #of-search-return-service-continue-btn.of-search-button--loading[aria-disabled="true"] {
    position: relative !important;
    color: transparent !important;
    background: var(--ayvens-theme-brand-secondary-300, #3F5D6D) !important;
    border-color: var(--ayvens-theme-brand-secondary-300, #3F5D6D) !important;
    box-shadow: none !important;
    cursor: wait !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

body.of-body #of-home-ctn[data-current-step="return-service"] #of-search-return-service-continue-btn.of-search-button--loading > * {
    opacity: 0 !important;
    color: transparent !important;
}

body.of-body #of-home-ctn[data-current-step="return-service"] #of-search-return-service-continue-btn.of-search-button--loading::before {
    content: "" !important;
    position: absolute !important;
    top: calc(50% - 12px) !important;
    left: calc(50% - 12px) !important;
    right: auto !important;
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    background: url("/Images/Flow/Icons/loaderframeabsolute.svg") center / 24px 24px no-repeat !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    transform-origin: 50% 50% !important;
    rotate: 0deg;
    animation: of-return-service-button-loader-spin 760ms linear infinite !important;
}

body.of-body #of-home-ctn[data-current-step="return-service"] #of-search-return-service-continue-btn.of-search-button--loading::after {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    content: none !important;
}

@keyframes of-return-service-button-loader-spin {
    from { rotate: 0deg; }
    to { rotate: 360deg; }
}

/* 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: 0;
    margin-bottom: 24px;
}

.of-search-location__title {
    max-width: 360px;
    margin: 0;
    font-size: 20px;
    line-height: 31px;
    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: 20px;
}

.of-search-location-current-label {
    margin: 0 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: 600;
    line-height: 20px;
    letter-spacing: 0.6px;
    text-align: center;
}

.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;
    max-width: 294px;
    margin-top: 2px;
    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-current-status:not(:empty) {
    display: block;
}

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

.of-search-location-separator {
    display: grid;
    grid-template-columns: minmax(0, 110px) auto minmax(0, 101px);
    align-items: center;
    justify-content: center;
    gap: 42px;
    width: 100%;
    margin-bottom: 18px;
    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: 320px;
    max-width: 100%;
    justify-self: center;
    margin-bottom: 24px;
}

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

.of-search-location-address-search {
    display: grid;
    gap: 12px;
}

.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-confirm-button {
    justify-self: center;
    min-width: 200px;
    min-height: 48px;
    padding: 12px 24px;
}

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

.of-search-location-clear-button {
    display: none;
}

.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-address-field.of-search-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-search,
.of-search-location-address-field.of-flow-field--invalid .of-search-location-address-search {
    border-color: #d92d20;
}

.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: 479.98px) {
    .of-search-location-intro {
        margin-bottom: 22px;
    }

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

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

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

    .of-search-location-current-label {
        width: 100%;
        margin: 0 0 8px;
        font-family: var(--of-font-family-form, "Source Sans 3", Arial, Helvetica, sans-serif);
        font-weight: 700;
        letter-spacing: 0;
        text-align: left;
    }

    .of-search-location-current-button {
        width: 100%;
        min-width: 0;
        min-height: 50px;
        padding: 10px 18px;
        font-size: 16px;
        line-height: 22px;
    }

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

    .of-search-location-separator {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 28px;
        margin-bottom: 16px;
    }

    .of-search-location-separator strong {
        font-size: 18px;
        line-height: 24px;
        letter-spacing: 1px;
    }

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

    .of-search-location-address-field .of-flow-field__label {
        margin-bottom: 8px;
    }

    .of-search-location-address-search {
        position: relative;
        display: block;
        align-self: stretch;
        min-height: 56px;
        padding: 4px 4px 4px 8px;
        background: var(--ayvens-theme-neutral-neutral-100, #f6f6f6);
        border: 2px solid var(--ayvens-theme-neutral-neutral-200, #e5e5e5);
        border-radius: 28px;
        box-sizing: border-box;
        transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
    }

    .of-search-location-address-search:focus-within,
    .of-search-location-address-search--has-value {
        border-color: var(--ayvens-theme-misc-focused-state, #0065ff);
        box-shadow: 0 0 0 2px rgba(0, 101, 255, 0.12);
    }

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

    .of-search-location-address-input {
        display: block;
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding: 0 58px 0 0;
        color: var(--ayvens-theme-neutral-neutral-800, #1f2933);
        font-family: var(--of-font-family-form, "Source Sans 3", Arial, Helvetica, sans-serif);
        font-size: 16px;
        font-weight: 400;
        line-height: 20px;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-sizing: border-box;
    }

    .of-search-location-address-search--has-value .of-search-location-address-input {
        padding-right: 96px;
    }

    .of-search-location-address-input:focus {
        border-color: transparent;
        box-shadow: none;
    }

    .of-search-location-clear-button {
        position: absolute;
        top: 50%;
        right: 58px;
        display: none;
        width: 34px;
        height: 34px;
        padding: 0;
        background: url("/Images/Flow/Icons/close.svg") center / 20px 20px no-repeat;
        border: 0;
        border-radius: 50%;
        transform: translateY(-50%);
        cursor: pointer;
    }

    .of-search-location-address-search--has-value .of-search-location-clear-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .of-search-location-confirm-button {
        position: absolute;
        top: 4px;
        right: 4px;
        bottom: 4px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-width: 0;
        min-height: 0;
        width: 48px;
        padding: 0;
        color: var(--ayvens-theme-neutral-neutral-700, #6f818c);
        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(--ayvens-theme-neutral-neutral-200, #e5e5e5);
        border: 0;
        border-radius: 50%;
        transition: color 160ms ease, background-color 160ms ease;
    }

    .of-search-location-address-search:focus-within .of-search-location-confirm-button,
    .of-search-location-address-search--has-value .of-search-location-confirm-button {
        color: #ffffff;
        background: var(--of-flow-brand-color, #0f3549);
    }

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

    .of-search-location-confirm-button::before {
        content: "";
        display: block;
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        background: url("/Images/Flow/Icons/search-rest.svg") center / 20px 20px no-repeat;
        transform: translate(-1px, -1px);
    }

    .of-search-location-address-search:focus-within .of-search-location-confirm-button::before,
    .of-search-location-address-search--has-value .of-search-location-confirm-button::before {
        background-image: url("/Images/Flow/Icons/search.svg");
    }
}

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

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

    .of-search-location-current-button {
        min-height: 48px;
        padding-left: 16px;
        padding-right: 16px;
        font-size: 15px;
    }

    .of-search-location-separator {
        gap: 20px;
        margin-bottom: 14px;
    }

    .of-search-location-address-search {
        padding-left: 8px;
    }

    .of-search-location-address-input {
        padding-right: 56px;
    }

    .of-search-location-address-search--has-value .of-search-location-address-input {
        padding-right: 92px;
    }

    .of-search-location-clear-button {
        right: 54px;
        width: 32px;
        height: 32px;
    }

    .of-search-location-confirm-button {
        width: 46px;
        padding: 0;
    }
}


@media (max-width: 479.98px) {
    body .pac-container.of-search-location-pac {
        margin: 0;
        padding: 4px 0;
        background: #ffffff;
        border: 0;
        border-radius: 0;
        box-shadow: 0 10px 26px rgba(15, 53, 73, 0.14);
        overflow: hidden;
        z-index: 12000;
    }

    body .pac-container.of-search-location-pac .pac-item {
        min-height: 31px;
        padding: 4px 12px;
        color: var(--ayvens-theme-neutral-neutral-800, #1f2933);
        font-family: var(--of-font-family-form, "Source Sans 3", Arial, Helvetica, sans-serif);
        font-size: 12px;
        font-weight: 400;
        line-height: 15px;
        white-space: nowrap;
        border-top: 1px solid var(--ayvens-theme-neutral-neutral-200, #e5e5e5);
        box-sizing: border-box;
    }

    body .pac-container.of-search-location-pac .pac-item:first-child {
        border-top: 0;
    }

    body .pac-container.of-search-location-pac .pac-icon {
        position: relative;
        width: 14px;
        height: 14px;
        margin-top: 1px;
        margin-right: 7px;
        background: none;
    }

    body .pac-container.of-search-location-pac .pac-icon::before {
        content: "";
        position: absolute;
        inset: 1px 2px 1px 2px;
        background: var(--ayvens-theme-neutral-neutral-400, #b4b4b4);
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14' viewBox='0 0 12 14' fill='none'%3E%3Cpath d='M6 0.75C3.38 0.75 1.25 2.88 1.25 5.5C1.25 9.06 6 13.25 6 13.25C6 13.25 10.75 9.06 10.75 5.5C10.75 2.88 8.62 0.75 6 0.75ZM6 7.19C5.07 7.19 4.31 6.43 4.31 5.5C4.31 4.57 5.07 3.81 6 3.81C6.93 3.81 7.69 4.57 7.69 5.5C7.69 6.43 6.93 7.19 6 7.19Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14' viewBox='0 0 12 14' fill='none'%3E%3Cpath d='M6 0.75C3.38 0.75 1.25 2.88 1.25 5.5C1.25 9.06 6 13.25 6 13.25C6 13.25 10.75 9.06 10.75 5.5C10.75 2.88 8.62 0.75 6 0.75ZM6 7.19C5.07 7.19 4.31 6.43 4.31 5.5C4.31 4.57 5.07 3.81 6 3.81C6.93 3.81 7.69 4.57 7.69 5.5C7.69 6.43 6.93 7.19 6 7.19Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    body .pac-container.of-search-location-pac .pac-item-query {
        color: var(--ayvens-theme-neutral-neutral-800, #1f2933);
        font-size: 14px;
        font-weight: 600;
        line-height: 16px;
    }

    body .pac-container.of-search-location-pac .pac-matched {
        font-weight: 700;
    }
}

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

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

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

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

/* Desktop location step vertical rhythm refinement 2026-06-06 v7. */
@media (min-width: 1280px) {
    #of-home-ctn[data-current-step="location"] .of-search-location-content {
        align-content: start;
        gap: 0;
    }

    #of-home-ctn[data-current-step="location"] .of-search-location-intro {
        margin-bottom: 24px;
    }

    #of-home-ctn[data-current-step="location"] .of-search-location-current-field {
        margin-bottom: 16px;
    }

    #of-home-ctn[data-current-step="location"] .of-search-location-current-status {
        margin-top: 6px;
    }

    #of-home-ctn[data-current-step="location"] .of-search-location-separator {
        margin-bottom: 16px;
    }

    #of-home-ctn[data-current-step="location"] .of-search-location-address-field {
        width: 340px;
        margin-bottom: 26px;
    }
}

/* Mobile T4 labels alignment: keep "Perto de mim" and address label identical. */
@media (max-width: 479.98px) {
    #of-search-location-step .of-search-location-current-label,
    #of-search-location-step #of-search-location-address-field .of-flow-field__label {
        font-size: 14px;
        line-height: 20px;
        font-weight: 700;
    }
}

/* Mobile T4 labels final override: flow.components.css applies 13px with !important on narrow screens. */
@media (max-width: 479.98px) {
    #of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-current-field > .of-search-location-current-label,
    #of-home-ctn[data-current-step="location"] #of-search-location-step #of-search-location-address-field > label.of-flow-field__label {
        font-size: 14px !important;
        line-height: 20px !important;
        font-weight: 700;
    }
}

/* Mobile T4 address input: reserve enough room for clear and search buttons. */
@media (max-width: 479.98px) {
    #of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search--has-value .of-search-location-address-input {
        padding-right: 85px;
    }
}

/* Mobile T4 address input final override: flow.components.css adds !important padding on narrow screens.
   Reserve real space for clear and search buttons so the typed address never runs underneath them. */
@media (max-width: 479.98px) {
    #of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-input.of-flow-text-input {
        padding: 0 58px 0 12px !important;
    }

    #of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search--has-value .of-search-location-address-input.of-flow-text-input {
        padding-right: 85px !important;
    }
}

/* Pass 10.5: tablet portrait T4 polish. */
@media (min-width: 740px) and (max-width: 959px) {
    #of-home-ctn[data-current-step="location"] .of-search-location-content {
        width: 100%;
        max-width: 316px;
        align-content: start;
    }

    #of-home-ctn[data-current-step="location"] .of-search-location-intro {
        margin-bottom: 26px;
    }

    #of-home-ctn[data-current-step="location"] .of-search-location-current-field {
        margin-bottom: 18px;
    }

    #of-home-ctn[data-current-step="location"] .of-search-location-current-button {
        width: 100%;
        min-height: 46px;
    }

    #of-home-ctn[data-current-step="location"] .of-search-location-separator {
        margin-bottom: 18px;
    }

    #of-home-ctn[data-current-step="location"] .of-search-location-address-field {
        width: 100%;
        margin-bottom: 22px;
    }

    #of-home-ctn[data-current-step="location"] .of-search-location-confirm-button {
        min-width: 180px;
        min-height: 44px;
    }
}

/* Pass 10.6: tablet portrait T4 address search must match the validated mobile control. */
@media (min-width: 740px) and (max-width: 959px) {
    #of-home-ctn[data-current-step="location"] .of-search-location-address-search {
        position: relative;
        display: block;
        align-self: stretch;
        min-height: 56px;
        padding: 4px 4px 4px 8px;
        background: var(--ayvens-theme-neutral-neutral-100, #f6f6f6);
        border: 2px solid var(--ayvens-theme-neutral-neutral-200, #e5e5e5);
        border-radius: 28px;
        box-sizing: border-box;
        transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
    }

    #of-home-ctn[data-current-step="location"] .of-search-location-address-search:focus-within,
    #of-home-ctn[data-current-step="location"] .of-search-location-address-search--has-value {
        border-color: var(--ayvens-theme-misc-focused-state, #0065ff);
        box-shadow: 0 0 0 2px rgba(0, 101, 255, 0.12);
    }

    #of-home-ctn[data-current-step="location"] .of-search-location-address-field.of-search-field--invalid .of-search-location-address-search,
    #of-home-ctn[data-current-step="location"] .of-search-location-address-field.of-flow-field--invalid .of-search-location-address-search {
        border-color: #d92d20;
        box-shadow: none;
    }

    #of-home-ctn[data-current-step="location"] .of-search-location-address-input.of-flow-text-input {
        display: block;
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding: 0 58px 0 12px;
        color: var(--ayvens-theme-neutral-neutral-800, #1f2933);
        font-family: var(--of-font-family-form, "Source Sans 3", Arial, Helvetica, sans-serif);
        font-size: 16px;
        font-weight: 400;
        line-height: 20px;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        box-sizing: border-box;
    }

    #of-home-ctn[data-current-step="location"] .of-search-location-address-search--has-value .of-search-location-address-input.of-flow-text-input {
        padding-right: 85px;
    }

    #of-home-ctn[data-current-step="location"] .of-search-location-address-input.of-flow-text-input:focus {
        border-color: transparent;
        box-shadow: none;
        outline: none;
    }

    #of-home-ctn[data-current-step="location"] .of-search-location-clear-button {
        position: absolute;
        top: 50%;
        right: 58px;
        display: none;
        width: 34px;
        height: 34px;
        padding: 0;
        background: url("/Images/Flow/Icons/close.svg") center / 20px 20px no-repeat;
        border: 0;
        border-radius: 50%;
        transform: translateY(-50%);
        cursor: pointer;
    }

    #of-home-ctn[data-current-step="location"] .of-search-location-address-search--has-value .of-search-location-clear-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    #of-home-ctn[data-current-step="location"] .of-search-location-confirm-button {
        position: absolute;
        top: 4px;
        right: 4px;
        bottom: 4px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-width: 0;
        min-height: 0;
        width: 48px;
        padding: 0;
        color: var(--ayvens-theme-neutral-neutral-700, #6f818c);
        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(--ayvens-theme-neutral-neutral-200, #e5e5e5);
        border: 0;
        border-radius: 50%;
        transition: color 160ms ease, background-color 160ms ease;
    }

    #of-home-ctn[data-current-step="location"] .of-search-location-address-search:focus-within .of-search-location-confirm-button,
    #of-home-ctn[data-current-step="location"] .of-search-location-address-search--has-value .of-search-location-confirm-button {
        color: #ffffff;
        background: var(--of-flow-brand-color, #0f3549);
    }

    #of-home-ctn[data-current-step="location"] .of-search-location-confirm-button__label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    #of-home-ctn[data-current-step="location"] .of-search-location-confirm-button::before {
        content: "";
        display: block;
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        background: url("/Images/Flow/Icons/search-rest.svg") center / 20px 20px no-repeat;
        transform: translate(-1px, -1px);
    }

    #of-home-ctn[data-current-step="location"] .of-search-location-address-search:focus-within .of-search-location-confirm-button::before,
    #of-home-ctn[data-current-step="location"] .of-search-location-address-search--has-value .of-search-location-confirm-button::before {
        background-image: url("/Images/Flow/Icons/search.svg");
    }
}

/* Pass 10.7: tablet portrait T4 current location button sizing. */
@media (min-width: 740px) and (max-width: 959px) {
    #of-home-ctn[data-current-step="location"] .of-search-location-current-button {
        width: auto;
        max-width: 100%;
        min-width: 0;
        min-height: 42px;
        padding: 9px 18px;
        gap: 10px;
        font-size: 15px;
        line-height: 20px;
    }

    #of-home-ctn[data-current-step="location"] .of-search-location-current-button__icon {
        width: 20px;
        height: 20px;
        flex-basis: 20px;
    }
}

/* Pass 10.8: T4 current-location label and address search consistency across all responsive ranges. */
#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-current-field {
    justify-items: stretch;
}

#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-current-field > .of-search-location-current-label,
#of-home-ctn[data-current-step="location"] #of-search-location-step #of-search-location-address-field > label.of-flow-field__label {
    width: 100%;
    margin: 0 0 10px;
    color: var(--of-flow-brand-color, #0f3549);
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 0;
    text-align: left;
}

#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search {
    position: relative;
    display: block;
    align-self: stretch;
    width: 100%;
    min-height: 56px;
    padding: 4px 4px 4px 8px;
    background: var(--ayvens-theme-neutral-neutral-100, #f6f6f6);
    border: 2px solid var(--ayvens-theme-neutral-neutral-200, #e5e5e5);
    border-radius: 28px;
    box-sizing: border-box;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search:focus-within,
#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search--has-value {
    border-color: var(--ayvens-theme-misc-focused-state, #0065ff);
    box-shadow: 0 0 0 2px rgba(0, 101, 255, 0.12);
}

#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-field.of-search-field--invalid .of-search-location-address-search,
#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-field.of-flow-field--invalid .of-search-location-address-search {
    border-color: #d92d20;
    box-shadow: none;
}

#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-input.of-flow-text-input {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0 58px 0 12px;
    color: var(--ayvens-theme-neutral-neutral-800, #1f2933);
    font-family: var(--of-font-family-form, "Source Sans 3", Arial, Helvetica, sans-serif);
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
}

#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search--has-value .of-search-location-address-input.of-flow-text-input {
    padding-right: 85px;
}

#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-input.of-flow-text-input:focus {
    border-color: transparent;
    box-shadow: none;
    outline: none;
}

#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-clear-button {
    position: absolute;
    top: 50%;
    right: 58px;
    display: none;
    width: 34px;
    height: 34px;
    padding: 0;
    background: url("/Images/Flow/Icons/close.svg") center / 20px 20px no-repeat;
    border: 0;
    border-radius: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search--has-value .of-search-location-clear-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-confirm-button {
    position: absolute;
    top: 4px;
    right: 4px;
    bottom: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 0;
    width: 48px;
    padding: 0;
    color: var(--ayvens-theme-neutral-neutral-700, #6f818c);
    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(--ayvens-theme-neutral-neutral-200, #e5e5e5);
    border: 0;
    border-radius: 50%;
    transition: color 160ms ease, background-color 160ms ease;
}

#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search:focus-within .of-search-location-confirm-button,
#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search--has-value .of-search-location-confirm-button {
    color: #ffffff;
    background: var(--of-flow-brand-color, #0f3549);
}

#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-confirm-button__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-confirm-button::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    background: url("/Images/Flow/Icons/search-rest.svg") center / 20px 20px no-repeat;
    transform: translate(-1px, -1px);
}

#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search:focus-within .of-search-location-confirm-button::before,
#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search--has-value .of-search-location-confirm-button::before {
    background-image: url("/Images/Flow/Icons/search.svg");
}

@media (max-width: 479.98px) {
    #of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-current-field > .of-search-location-current-label,
    #of-home-ctn[data-current-step="location"] #of-search-location-step #of-search-location-address-field > label.of-flow-field__label {
        font-size: 14px !important;
        line-height: 20px !important;
        font-weight: 700 !important;
    }
}

/* Pass 10.25: compact desktop location form inside the narrower Velocity XL left column. */
@media (min-width: 1280px) {
    #of-home-ctn[data-current-step="location"] .of-search-location-content {
        padding-right: 28px;
        padding-left: 28px;
    }

    #of-home-ctn[data-current-step="location"] .of-search-location-current-button {
        width: 100%;
        max-width: 304px;
        min-height: 48px;
        padding: 13px 18px;
        justify-content: center;
    }

    #of-home-ctn[data-current-step="location"] .of-search-location-address-search {
        width: 100%;
        max-width: 304px;
    }

    #of-home-ctn[data-current-step="location"] .of-search-location-separator {
        width: 100%;
        max-width: 304px;
    }
}

@media (min-width: 1600px) {
    #of-home-ctn[data-current-step="location"] .of-search-location-current-button,
    #of-home-ctn[data-current-step="location"] .of-search-location-address-search,
    #of-home-ctn[data-current-step="location"] .of-search-location-separator {
        max-width: 320px;
    }
}


/* Pass 10.26: keep desktop location controls inside the compact left column. */
@media (min-width: 1280px) {
    #of-home-ctn .of-search-location-step,
    #of-home-ctn .of-location-step,
    #of-home-ctn .of-search-location {
        max-width: 100%;
        min-width: 0;
    }

    #of-home-ctn .of-location-step__current,
    #of-home-ctn .of-location-step__address,
    #of-home-ctn .of-location-step__separator,
    #of-home-ctn .of-location-current,
    #of-home-ctn .of-location-address {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    #of-home-ctn .of-location-step__use-current,
    #of-home-ctn .of-location-use-current,
    #of-home-ctn .of-location-current__button,
    #of-home-ctn .of-location-address__field,
    #of-home-ctn .of-location-address__input-wrap {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    #of-home-ctn .of-location-step__use-current,
    #of-home-ctn .of-location-use-current,
    #of-home-ctn .of-location-current__button {
        padding-right: 18px;
        padding-left: 18px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #of-home-ctn .of-location-address__input,
    #of-home-ctn .of-location-step__address-input {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
}

/* Pass 10.27: keep current-location CTA readable inside compact desktop column. */
@media (min-width: 1280px) {
    #of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-current-button {
        display: inline-flex;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        justify-content: center;
        gap: 8px;
        padding-right: 14px;
        padding-left: 14px;
        font-size: 14px;
        line-height: 18px;
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
    }

    #of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-current-button span {
        display: inline-block;
        min-width: 0;
        max-width: calc(100% - 30px);
        overflow: visible;
        text-overflow: clip;
        white-space: nowrap;
    }

    #of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-current-button__icon {
        flex: 0 0 20px;
        width: 20px;
        height: 20px;
    }

    #of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-separator,
    #of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search {
        width: 100%;
        max-width: 100%;
    }
}

/* Pass 10.43: desktop location controls fit the compact left column without extra inner padding. */
@media (min-width: 1280px) {
    #of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
        overflow: visible;
    }

    #of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-current-field,
    #of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-field,
    #of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-separator,
    #of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow: visible;
    }

    #of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-current-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: 48px;
        min-height: 48px;
        padding: 0 12px;
        box-sizing: border-box;
        overflow: hidden;
        white-space: nowrap;
    }

    #of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-current-button__icon {
        flex: 0 0 20px;
        width: 20px;
        height: 20px;
    }

    #of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-current-button span {
        flex: 0 1 auto;
        min-width: 0;
        max-width: calc(100% - 28px);
        font-size: 14px;
        line-height: 18px;
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
    }

    #of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-input.of-flow-text-input {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
}

/* Pass 18: client review - location option hierarchy and lighter headings. */
.of-search-location__title,
.of-search-location-current-label,
.of-search-location-separator strong,
.of-search-location-address-field .of-flow-field__label {
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

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

.of-search-location-address-field {
    margin-top: 4px !important;
}

/* Pass 34: final Ayvens search states for location address search.
   Rest empty: grey button.
   Focus empty: blue border, grey button.
   With value: blue border and blue search button. */
#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search {
    border-color: var(--ayvens-theme-neutral-neutral-200, #e5e5e5) !important;
    box-shadow: none !important;
}

#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search:focus-within,
#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search.of-search-location-address-search--focused,
#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search.of-search-location-address-search--has-value {
    border-color: var(--ayvens-theme-misc-focused-state, #0065ff) !important;
    box-shadow: 0 0 0 2px rgba(0, 101, 255, 0.12) !important;
}

#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search:not(.of-search-location-address-search--has-value) .of-search-location-confirm-button,
#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search:not(.of-search-location-address-search--has-value):focus-within .of-search-location-confirm-button,
#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search.of-search-location-address-search--focused:not(.of-search-location-address-search--has-value) .of-search-location-confirm-button {
    color: var(--ayvens-theme-neutral-neutral-600, #8a969e) !important;
    background: var(--ayvens-theme-neutral-neutral-200, #e5e5e5) !important;
    cursor: default !important;
}

#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search:not(.of-search-location-address-search--has-value) .of-search-location-confirm-button::before,
#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search:not(.of-search-location-address-search--has-value):focus-within .of-search-location-confirm-button::before,
#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search.of-search-location-address-search--focused:not(.of-search-location-address-search--has-value) .of-search-location-confirm-button::before {
    background-image: url("/Images/Flow/Icons/search-rest.svg") !important;
}

#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search.of-search-location-address-search--has-value .of-search-location-confirm-button {
    color: #ffffff !important;
    background: var(--of-flow-brand-color, #0f3549) !important;
    cursor: pointer !important;
}

#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search.of-search-location-address-search--has-value .of-search-location-confirm-button::before {
    background-image: url("/Images/Flow/Icons/search.svg") !important;
}


/* Pass 36: Velocity-like loading state on location search buttons. */
#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-current-button.of-search-button--loading {
    display: flex;
    padding: 12px 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: var(--ayvens-theme-neutral-neutral-white, #ffffff);
    text-align: center;
    font-family: Chillax, var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 17px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    background: var(--ayvens-theme-brand-secondary-300, #3F5D6D);
    border-radius: 30px;
    cursor: wait;
    pointer-events: none;
}

#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-current-button.of-search-button--loading .of-search-location-current-button__icon {
    display: none;
}

#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-current-button.of-search-button--loading::before,
#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-confirm-button.of-search-button--loading::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.42);
    border-top-color: var(--ayvens-theme-neutral-neutral-white, #ffffff);
    border-radius: 50%;
    transform: none;
    animation: of-location-button-loader-spin 760ms linear infinite;
}

#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-confirm-button.of-search-button--loading {
    color: var(--ayvens-theme-neutral-neutral-white, #ffffff) !important;
    background: var(--ayvens-theme-brand-secondary-300, #3F5D6D) !important;
    cursor: wait !important;
    pointer-events: none;
}

#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-confirm-button.of-search-button--loading::before {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
}

@keyframes of-location-button-loader-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/* Pass 37: use Ayvens loader SVG for search button loading states. */
#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-button--loading {
    position: relative;
}

#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-current-button.of-search-button--loading::before,
#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-confirm-button.of-search-button--loading::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    background: url("/Images/Flow/Icons/loaderframeabsolute.svg") center / 24px 24px no-repeat !important;
    border: 0 !important;
    border-radius: 0 !important;
    animation: of-location-button-loader-spin 760ms linear infinite;
}

#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-current-button.of-search-button--loading::before {
    position: absolute;
    top: 12px;
    right: 69px;
    transform: none;
}

#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-confirm-button.of-search-button--loading::before {
    position: static;
    transform: none;
}

#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-confirm-button.of-search-button--loading {
    color: var(--ayvens-theme-neutral-neutral-white, #ffffff) !important;
    background: var(--ayvens-theme-brand-secondary-300, #3F5D6D) !important;
}


/* Pass 38: keep current-location button in processing state immediately after click, even while its radio input is disabled. */
#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-current-button.of-search-button--loading,
#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-current-button.of-search-button--loading:has(input:disabled) {
    position: relative;
    display: flex;
    padding: 12px 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: var(--ayvens-theme-neutral-neutral-white, #ffffff) !important;
    text-align: center;
    font-family: Chillax, var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 17px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    background: var(--ayvens-theme-brand-secondary-300, #3F5D6D) !important;
    border-color: var(--ayvens-theme-brand-secondary-300, #3F5D6D) !important;
    border-radius: 30px;
    opacity: 1 !important;
    cursor: wait;
    pointer-events: none;
}

#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-current-button.of-search-button--loading::before,
#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-current-button.of-search-button--loading:has(input:disabled)::before {
    content: "";
    position: absolute;
    top: 12px;
    right: 69px;
    display: block;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    background: url("/Images/Flow/Icons/loaderframeabsolute.svg") center / 24px 24px no-repeat !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: none;
    animation: of-location-button-loader-spin 760ms linear infinite;
}

#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-confirm-button.of-search-button--loading {
    background: var(--ayvens-theme-brand-secondary-300, #3F5D6D) !important;
    opacity: 1 !important;
}


/* Pass 39: location loading state is a centered spinner-only pill, matching Figma/Velocity. */
#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-current-button.of-search-button--loading,
#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-current-button.of-search-button--loading:has(input:disabled),
#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-confirm-button.of-search-button--loading {
    position: relative;
    color: transparent !important;
    background: var(--ayvens-theme-brand-secondary-300, #3F5D6D) !important;
    border-color: var(--ayvens-theme-brand-secondary-300, #3F5D6D) !important;
    opacity: 1 !important;
    cursor: wait;
    pointer-events: none;
}

#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-current-button.of-search-button--loading > *,
#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-current-button.of-search-button--loading:has(input:disabled) > *,
#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-confirm-button.of-search-button--loading > * {
    opacity: 0 !important;
}

#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-current-button.of-search-button--loading::before,
#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-current-button.of-search-button--loading:has(input:disabled)::before,
#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-confirm-button.of-search-button--loading::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    right: auto;
    display: block;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    background: url("/Images/Flow/Icons/loaderframeabsolute.svg") center / 24px 24px no-repeat !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: translate(-50%, -50%);
    animation: of-location-button-loader-spin-centered 760ms linear infinite;
}

@keyframes of-location-button-loader-spin-centered {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 20260701 PRD-005: keep T4 address search visually stable in production.
   The input itself must stay transparent; only the outer rounded search shell changes state. */
#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search,
#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search.of-search-location-address-search--focused,
#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search.of-search-location-address-search--has-value,
#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search:focus-within {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 56px !important;
    padding: 4px 4px 4px 8px !important;
    overflow: hidden !important;
    background: var(--ayvens-theme-neutral-neutral-100, #f6f6f6) !important;
    border-radius: 28px !important;
    box-sizing: border-box !important;
}

#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search {
    border: 2px solid var(--ayvens-theme-neutral-neutral-200, #e5e5e5) !important;
    box-shadow: none !important;
}

#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search.of-search-location-address-search--focused,
#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search.of-search-location-address-search--has-value,
#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search:focus-within {
    border-color: var(--ayvens-theme-misc-focused-state, #0065ff) !important;
    box-shadow: none !important;
}

#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-input.of-flow-text-input,
#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-input.of-flow-text-input:focus,
#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search--has-value .of-search-location-address-input.of-flow-text-input {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 85px 0 12px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    box-sizing: border-box !important;
}

#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search:not(.of-search-location-address-search--has-value) .of-search-location-address-input.of-flow-text-input {
    padding-right: 58px !important;
}

#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-confirm-button,
#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-confirm-button.of-search-button--loading {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    bottom: 4px !important;
    left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    color: var(--ayvens-theme-neutral-neutral-600, #8a969e) !important;
    background: var(--ayvens-theme-neutral-neutral-200, #e5e5e5) !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
}

#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search.of-search-location-address-search--has-value .of-search-location-confirm-button,
#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search.of-search-location-address-search--has-value .of-search-location-confirm-button.of-search-button--loading {
    color: #ffffff !important;
    background: var(--of-flow-brand-color, #0f3549) !important;
}

#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-confirm-button.of-search-button--loading > * {
    opacity: 0 !important;
}

/* 20260701 PRD-007: keep WEB/mobile address search on the location step and replace the search icon with the standard loader. */
#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search.of-search-location-address-search--has-value .of-search-location-confirm-button.of-search-button--loading,
#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-confirm-button.of-search-button--loading {
    color: #ffffff !important;
    background: var(--ayvens-theme-brand-secondary-300, #3F5D6D) !important;
    cursor: wait !important;
    pointer-events: none !important;
}

#of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-confirm-button.of-search-button--loading::before {
    content: "" !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px !important;
    background: url("/Images/Flow/Icons/loaderframeabsolute.svg") center / 24px 24px no-repeat !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    transform-origin: 50% 50% !important;
    animation: of-location-button-loader-spin 760ms linear infinite !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;
}


/* Pass 11.10 / follow-up: keep the brand line as free as possible and show an icon-only edit button beside the plate row. */
.of-search-vehicle-summary.of-flow-vehicle-card {
    position: relative;
    grid-template-columns: 68px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
}

.of-search-vehicle-summary__main {
    min-width: 0;
}

.of-search-vehicle-summary__name,
.of-search-vehicle-summary__plate {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.of-search-vehicle-summary__change.of-flow-change-button {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: end;
    justify-self: end;
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    margin-bottom: 2px;
    padding: 0;
    color: #ffffff;
    border-radius: 999px;
    font-size: 0;
    line-height: 0;
}

.of-search-vehicle-summary__change.of-flow-change-button::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    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;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.3685 20.2492C15.8613 20.2492 16.261 20.6401 16.2611 21.1242C16.2609 21.6082 15.8613 22.0002 15.3685 22.0002H2.89294C2.40031 22 2.00054 21.6081 2.00037 21.1242C2.00049 20.6402 2.40029 20.2494 2.89294 20.2492H15.3685Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.9095 2.87518C17.0988 1.70918 19.0357 1.70672 20.226 2.87518L21.1088 3.73944C22.2421 4.85176 22.2938 6.62729 21.266 7.80194L21.2806 7.81463L10.9847 17.8976C10.5911 18.2836 10.0465 18.5059 9.48865 18.506H9.48279L6.37927 18.4894C5.72754 18.4859 5.19339 17.9624 5.18787 17.3234L5.16931 14.2756C5.16503 13.7277 5.39015 13.1897 5.78552 12.8019C9.1605 9.49332 12.5361 6.18531 15.9095 2.87518ZM7.04822 14.0402C6.98852 14.0988 6.9546 14.1818 6.95544 14.2648L6.97107 16.7414L9.48962 16.7551C9.57428 16.7551 9.66134 16.7205 9.72205 16.6603L17.4437 9.08319C16.5874 8.18006 15.6663 7.33322 14.7777 6.4621L7.04822 14.0402ZM18.9633 4.11346C18.4855 3.64622 17.6508 3.64432 17.1722 4.11346L16.0394 5.22479L18.7035 7.8512L19.89 6.68573C20.337 6.19884 20.3227 5.44631 19.8451 4.97772L18.9633 4.11346Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.3685 20.2492C15.8613 20.2492 16.261 20.6401 16.2611 21.1242C16.2609 21.6082 15.8613 22.0002 15.3685 22.0002H2.89294C2.40031 22 2.00054 21.6081 2.00037 21.1242C2.00049 20.6402 2.40029 20.2494 2.89294 20.2492H15.3685Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.9095 2.87518C17.0988 1.70918 19.0357 1.70672 20.226 2.87518L21.1088 3.73944C22.2421 4.85176 22.2938 6.62729 21.266 7.80194L21.2806 7.81463L10.9847 17.8976C10.5911 18.2836 10.0465 18.5059 9.48865 18.506H9.48279L6.37927 18.4894C5.72754 18.4859 5.19339 17.9624 5.18787 17.3234L5.16931 14.2756C5.16503 13.7277 5.39015 13.1897 5.78552 12.8019C9.1605 9.49332 12.5361 6.18531 15.9095 2.87518ZM7.04822 14.0402C6.98852 14.0988 6.9546 14.1818 6.95544 14.2648L6.97107 16.7414L9.48962 16.7551C9.57428 16.7551 9.66134 16.7205 9.72205 16.6603L17.4437 9.08319C16.5874 8.18006 15.6663 7.33322 14.7777 6.4621L7.04822 14.0402ZM18.9633 4.11346C18.4855 3.64622 17.6508 3.64432 17.1722 4.11346L16.0394 5.22479L18.7035 7.8512L19.89 6.68573C20.337 6.19884 20.3227 5.44631 19.8451 4.97772L18.9633 4.11346Z' fill='black'/%3E%3C/svg%3E");
}

.of-search-vehicle-summary__change.of-flow-change-button:hover,
.of-search-vehicle-summary__change.of-flow-change-button:focus-visible {
    color: #ffffff;
}

@supports not ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
    .of-search-vehicle-summary__change.of-flow-change-button::before {
        content: "✎";
        width: auto;
        height: auto;
        background: none;
        color: currentColor;
        font-size: 16px;
        line-height: 1;
        -webkit-mask-image: none;
        mask-image: none;
    }
}

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

    .of-search-vehicle-summary__change.of-flow-change-button {
        width: 28px !important;
        min-width: 28px !important;
        height: 28px !important;
        min-height: 28px !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
    }
}

/* Pass 18: align vehicle edit icon button with outlined map action buttons. */
.of-search-vehicle-summary__change.of-flow-change-button {
    color: var(--of-flow-brand-color, #0f3549) !important;
    background: #ffffff !important;
    border: 1px solid var(--of-flow-brand-color, #0f3549) !important;
}

.of-search-vehicle-summary__change.of-flow-change-button:hover,
.of-search-vehicle-summary__change.of-flow-change-button:focus-visible {
    color: var(--of-flow-brand-color, #0f3549) !important;
    background: var(--of-surface-subtle-bg, #eef3f4) !important;
    border-color: var(--of-flow-brand-color, #0f3549) !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__footer {
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: var(--of-responsive-shell-footer-height, 32px);
    padding: 6px 32px;
    color: var(--of-text-inverse, #ffffff);
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
    font-size: 13px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
    letter-spacing: 0.3px;
    background: var(--ayvens-theme-brand-secondary-400, #0f3549);
    box-sizing: border-box;
}

.of-results-shell__footer > span {
    display: block;
    width: 100%;
    max-width: none;
    color: inherit;
    text-align: left;
}

.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: 13px;
    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: var(--of-flow-header-height, 88px) minmax(0, 1fr) var(--of-flow-footer-height, 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: var(--of-flow-header-height, 88px);
        height: var(--of-flow-header-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: 24px;
        height: 24px;
        background-color: transparent;
        background-image: url("/Images/Flow/Icons/Icons_chevron-left-bg.svg");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 24px 24px;
        clip-path: none;
    }

    .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: var(--of-flow-mobile-header-title-size, 16px);
        font-weight: 700;
        line-height: var(--of-flow-mobile-header-title-line-height, 20px);
        letter-spacing: var(--of-flow-mobile-header-title-letter-spacing, 0.2px);
        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: 13px;
        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: var(--of-flow-mobile-header-title-size, 16px) !important;
        line-height: var(--of-flow-mobile-header-title-line-height, 20px) !important;
        letter-spacing: var(--of-flow-mobile-header-title-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: 5px 14px !important;
        font-size: 13px !important;
        line-height: 16px !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: var(--of-flow-mobile-header-title-size, 16px) !important;
        line-height: var(--of-flow-mobile-header-title-line-height, 20px) !important;
        letter-spacing: var(--of-flow-mobile-header-title-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: 13px !important;
        line-height: 16px !important;
    }
}

/* Desktop initial results base 2026-06-04 */
@media (min-width: 1280px) {
    .of-home__results {
        background: var(--of-map-bg, #e5ecef);
        border-radius: 0;
    }

    .of-results-shell__body {
        right: 0;
        bottom: var(--of-flow-desktop-footer-height, 56px);
        left: 0;
        height: auto;
        background: var(--of-map-bg, #e5ecef);
    }

    #of-home-ctn[data-results-state="ready"] .of-results-shell__change-location,
    #of-home-ctn[data-results-state="empty"] .of-results-shell__change-location {
        bottom: calc(var(--of-flow-desktop-footer-height, 56px) + 24px);
        display: inline-flex;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-shell__change-location {
        left: calc(50% - (var(--of-flow-desktop-results-list-width, 312px) / 2));
    }
}

/* Desktop T5 map/list refinement 2026-06-04 v2 */
@media (min-width: 1280px) {
    .of-results-shell__body {
        bottom: var(--of-flow-desktop-footer-height, 56px);
    }

    .of-home__results-partners {
        top: var(--of-flow-desktop-panel-padding-y, 24px);
        right: var(--of-flow-desktop-panel-padding-x, 24px);
        bottom: var(--of-flow-desktop-footer-height, 56px);
        width: var(--of-flow-desktop-results-list-width, 332px);
        max-width: calc(100% - 48px);
    }

    #of-home-ctn[data-results-state="ready"] .of-results-shell__change-location,
    #of-home-ctn[data-results-state="empty"] .of-results-shell__change-location {
        bottom: calc(var(--of-flow-desktop-footer-height, 56px) + 28px);
    }

    #of-home-ctn[data-results-state="ready"] .of-results-shell__change-location {
        left: calc(50% - 180px);
    }
}

/* Desktop T5 list overlay cleanup 2026-06-04 v3 */
@media (min-width: 1280px) {
    .of-home__results-partners {
        bottom: var(--of-flow-desktop-footer-height, 56px);
    }
}

/* Desktop T5 list/card click refinement 2026-06-04 v4 */
@media (min-width: 1280px) {
    .of-home__results-partners {
        top: 12px;
        right: var(--of-flow-desktop-panel-padding-x, 24px);
        bottom: var(--of-flow-desktop-footer-height, 56px);
        width: var(--of-flow-desktop-results-list-width, 332px);
    }
}



/* Desktop T5 balance refinement 2026-06-04 v5 */
@media (min-width: 1280px) {
    .of-results-shell__body {
        right: 0;
        bottom: auto;
        left: 0;
        height: calc(100% - var(--of-flow-desktop-footer-height, 56px));
        min-height: 0;
    }

    .of-home__results-partners {
        top: 12px;
        right: var(--of-flow-desktop-panel-padding-x, 20px);
        bottom: 0;
        width: var(--of-flow-desktop-results-list-width, 300px);
        max-width: calc(100% - (var(--of-flow-desktop-panel-padding-x, 20px) * 2));
    }

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

    #of-home-ctn[data-results-state="ready"] .of-results-shell__change-location {
        left: calc(50% - (var(--of-flow-desktop-results-list-width, 300px) / 2));
    }
}

/* Pass 10.17.3: desktop results body must not subtract the footer twice.
   The responsive shell grid already reserves the footer row, so the map body fills the full results row at 1280px+. */
@media (min-width: 1280px) {
    #of-home-ctn .of-results-shell__body {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        height: 100%;
        min-height: 0;
    }
}

/* Pass 10.19: with results in the left column, keep the map control centred in the map area. */
@media (min-width: 1280px) {
    #of-home-ctn[data-results-state="ready"] .of-results-shell__change-location,
    #of-home-ctn[data-results-state="empty"] .of-results-shell__change-location {
        left: 50%;
        bottom: 28px;
        transform: translateX(-50%);
    }
}


/* Pass 10.94: screen-local legal footer alignment override.
   Keep footer text position identical to the shared footer: 24px from the left and right. */
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;
    padding-left: 24px !important;
    padding-right: 24px !important;
    text-align: left !important;
    box-sizing: border-box !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 {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}


/* Pass 10.95: canonical footer size for all non-desktop shells.
   Text position and footer height now match across map, detail, search and booking. */
@media (max-width: 1279px) {
    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 {
        flex: 0 0 var(--of-flow-footer-height, 52px) !important;
        min-height: var(--of-flow-footer-height, 52px) !important;
        height: var(--of-flow-footer-height, 52px) !important;
        max-height: var(--of-flow-footer-height, 52px) !important;
        padding: 5px 24px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        font-size: 11.5px !important;
        line-height: 14px !important;
        letter-spacing: 0.15px !important;
        text-align: left !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;
        margin: 0 !important;
        white-space: normal !important;
        overflow: hidden !important;
        overflow-wrap: anywhere !important;
        text-align: left !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 {
        flex-basis: var(--of-flow-footer-height, 46px) !important;
        min-height: var(--of-flow-footer-height, 46px) !important;
        height: var(--of-flow-footer-height, 46px) !important;
        max-height: var(--of-flow-footer-height, 46px) !important;
        padding: 3px 24px !important;
        font-size: 10.5px !important;
        line-height: 13px !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 {
        line-height: 13px !important;
    }
}


/* Pass 10.96: fixed non-desktop footer height and stable legal-copy alignment.
   Tablet was inheriting the 88px mobile-flow token; force the same compact footer everywhere below desktop. */
@media (max-width: 1279px) {
    body.of-body {
        --of-flow-footer-height: 52px !important;
    }

    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 {
        flex: 0 0 52px !important;
        min-height: 52px !important;
        height: 52px !important;
        max-height: 52px !important;
        padding: 5px 24px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
        color: #ffffff !important;
        background: var(--of-flow-brand-color, #0f3549) !important;
        font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif) !important;
        font-size: 11.5px !important;
        font-weight: 400 !important;
        line-height: 14px !important;
        letter-spacing: 0.15px !important;
        text-align: left !important;
        box-sizing: border-box !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;
        min-width: 0 !important;
        margin: 0 !important;
        color: inherit !important;
        text-align: left !important;
        white-space: normal !important;
        overflow: hidden !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        line-height: 14px !important;
        box-sizing: border-box !important;
    }

    body.of-body .of-flow-footer a,
    body.of-body .of-search-shell__footer a,
    body.of-body .of-results-shell__footer a,
    body.of-body .of-partner-detail__footer a,
    body.of-body .of-booking__footer a {
        color: inherit !important;
        text-decoration: none !important;
    }
}

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

    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 {
        flex-basis: 46px !important;
        min-height: 46px !important;
        height: 46px !important;
        max-height: 46px !important;
        padding: 3px 24px !important;
        font-size: 10.5px !important;
        line-height: 13px !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 {
        line-height: 13px !important;
    }
}


/* Pass 10.97: restore tablet footer to the responsive shell size.
   Tablet footer is 32px like the original responsive shell; mobile keeps the 52/46px mobile footer. */
@media (min-width: 480px) and (max-width: 1279px) {
    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 {
        flex: 0 0 var(--of-responsive-shell-footer-height, 32px) !important;
        min-height: var(--of-responsive-shell-footer-height, 32px) !important;
        height: var(--of-responsive-shell-footer-height, 32px) !important;
        max-height: var(--of-responsive-shell-footer-height, 32px) !important;
        padding: 6px 24px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
        color: #ffffff !important;
        background: var(--of-flow-brand-color, #0f3549) !important;
        font-size: 10.5px !important;
        line-height: 13px !important;
        letter-spacing: 0.15px !important;
        text-align: left !important;
        box-sizing: border-box !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;
        min-width: 0 !important;
        margin: 0 !important;
        color: inherit !important;
        text-align: left !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: clip !important;
        line-height: 13px !important;
        box-sizing: border-box !important;
    }

    body.of-body .of-flow-footer a,
    body.of-body .of-search-shell__footer a,
    body.of-body .of-results-shell__footer a,
    body.of-body .of-partner-detail__footer a,
    body.of-body .of-booking__footer a {
        color: inherit !important;
        text-decoration: none !important;
    }
}

/* Pass 11.18: mobile results header height restored; service title only gets a small font bump. */
@media (max-width: 479.98px) {
    body.of-body .of-home__results {
        grid-template-rows: var(--of-flow-header-height, 60px) minmax(0, 1fr) var(--of-flow-footer-height, 52px) !important;
    }

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

    body.of-body .of-results-shell__title {
        font-size: var(--of-flow-mobile-header-title-size, 18px) !important;
        line-height: var(--of-flow-mobile-header-title-line-height, 23px) !important;
        letter-spacing: var(--of-flow-mobile-header-title-letter-spacing, 0.3px) !important;
    }

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

/* Pass 11.28: tablet header service title typography standard. */
@media (min-width: 740px) and (max-width: 1199px) {
    #of-home-ctn[data-results-state="ready"] .of-results-shell__heading,
    #of-home-ctn[data-results-state="empty"] .of-results-shell__heading {
        justify-content: center !important;
        text-align: center !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-shell__title,
    #of-home-ctn[data-results-state="empty"] .of-results-shell__title {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--ayvens-theme-brand-secondary-400, #0f3549) !important;
        font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif) !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 20px !important;
        letter-spacing: 0.2px !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* Pass 11.37: canonical tablet/desktop service header title alignment. */
@media (min-width: 740px) {
    body.of-body #of-home-ctn {
        --of-canonical-service-header-height: 64px;
        --of-canonical-service-title-size: 16px;
        --of-canonical-service-title-line-height: 20px;
        --of-canonical-service-title-letter-spacing: 0.2px;
    }

    body.of-body #of-home-ctn .of-search-shell--step-title .of-search-shell__header,
    body.of-body #of-home-ctn[data-results-state="ready"] .of-results-shell__header,
    body.of-body #of-home-ctn[data-results-state="empty"] .of-results-shell__header,
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__header,
    body.of-body #of-home-ctn[data-current-stage="booking"] > #of-booking-panel.of-booking .of-booking__header {
        position: relative !important;
        min-height: var(--of-canonical-service-header-height) !important;
        height: var(--of-canonical-service-header-height) !important;
        max-height: var(--of-canonical-service-header-height) !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    body.of-body #of-home-ctn .of-search-shell--step-title .of-search-shell__logo,
    body.of-body #of-home-ctn[data-results-state="ready"] .of-results-shell__title,
    body.of-body #of-home-ctn[data-results-state="empty"] .of-results-shell__title,
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__title,
    body.of-body #of-home-ctn[data-current-stage="booking"] > #of-booking-panel.of-booking .of-booking__title {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100vw - 144px) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--ayvens-theme-brand-secondary-400, #0f3549) !important;
        font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif) !important;
        font-size: var(--of-canonical-service-title-size) !important;
        font-weight: 700 !important;
        line-height: var(--of-canonical-service-title-line-height) !important;
        letter-spacing: var(--of-canonical-service-title-letter-spacing) !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-indent: 0 !important;
        background: none !important;
        background-image: none !important;
        box-sizing: border-box !important;
    }

    body.of-body #of-home-ctn[data-results-state="ready"] .of-results-shell__heading,
    body.of-body #of-home-ctn[data-results-state="empty"] .of-results-shell__heading {
        position: static !important;
        display: block !important;
        width: auto !important;
        height: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Pass 11.71: mobile map CTA spacing above the card carousel. */
@media (max-width: 479px) {
    #of-home-ctn[data-results-state="ready"] .of-results-shell__change-location {
        bottom: 198px !important;
    }
}

@media (max-width: 390px) and (max-height: 700px) {
    #of-home-ctn[data-results-state="ready"] .of-results-shell__change-location {
        bottom: 186px !important;
    }
}

/* Pass 11.72: mobile results CTA and footer spacing refinement. */
@media (max-width: 479px) {
    body.of-body .of-results-shell__footer {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-shell__change-location {
        bottom: 202px !important;
        box-shadow: 0 4px 10px rgba(15, 53, 73, 0.08) !important;
    }
}

@media (max-width: 390px) and (max-height: 700px) {
    #of-home-ctn[data-results-state="ready"] .of-results-shell__change-location {
        bottom: 190px !important;
    }
}


/* Pass 11.73: mobile results footer and location CTA final spacing. */
@media (max-width: 479px) {
    body.of-body .of-results-shell__footer {
        padding-left: 15px !important;
        padding-right: 15px !important;
        padding-inline: 15px !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-shell__change-location {
        bottom: 206px !important;
        box-shadow: 0 2px 6px rgba(15, 53, 73, 0.06) !important;
    }
}

@media (max-width: 390px) and (max-height: 700px) {
    #of-home-ctn[data-results-state="ready"] .of-results-shell__change-location {
        bottom: 194px !important;
    }
}

/* Pass 11.74: mobile results footer/location CTA final override. */
@media (max-width: 479px) {
    body.of-body .of-results-shell__footer,
    body.of-body .of-search-shell__footer,
    footer.of-results-shell__footer,
    footer.of-search-shell__footer {
        padding: 5px 15px !important;
        padding-inline: 15px !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-shell__change-location {
        box-shadow: 0 1px 4px rgba(15, 53, 73, 0.06) !important;
    }
}

/* Pass 11.75: hard mobile legal footer rail.
   The responsive footer rules below desktop still set 24px; override by ID so mobile stays on 15px. */
@media (max-width: 479px) {
    html body.of-body #of-home-ctn .of-flow-footer,
    html body.of-body #of-home-ctn .of-search-shell__footer,
    html body.of-body #of-home-ctn .of-results-shell__footer,
    html body.of-body #of-home-ctn .of-partner-detail__footer,
    html body.of-body #of-home-ctn .of-booking__footer,
    html body.of-body #of-home-ctn footer.of-flow-footer,
    html body.of-body #of-home-ctn footer.of-search-shell__footer,
    html body.of-body #of-home-ctn footer.of-results-shell__footer,
    html body.of-body #of-home-ctn footer.of-partner-detail__footer,
    html body.of-body #of-home-ctn footer.of-booking__footer {
        padding-left: 15px !important;
        padding-right: 15px !important;
        padding-inline: 15px !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: 0;
}

.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="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: 48px;
    height: 62px;
    cursor: pointer;
    transform-origin: center bottom;
    transition: transform 160ms ease;
}

.of-map-marker--image {
    width: 42px;
    height: 56px;
    background: transparent;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.24));
}

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

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

.of-map-marker--image.of-map-marker--selected {
    transform: none;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.30));
}

.of-map-marker--search-image {
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.28));
}

.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: #ffdc46; }
.of-classification--green::before { background: #008282; }
.of-classification--yellow::before { background: #0f3549; }
.of-classification--orange::before { background: #005a9c; }
.of-classification--non-preferential::before,
.of-classification--red::before,
.of-classification--black::before,
.of-classification--brown::before,
.of-classification--cyan::before,
.of-classification--unknown::before { background: #9de0e0; }

.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;
    content: none;
}

/* Desktop map base 2026-06-04 */
@media (min-width: 1280px) {
    .of-map-shell {
        background: var(--of-map-bg, #e5ecef);
        border-radius: 0;
    }

    .of-map-status {
        right: 32px;
        bottom: 24px;
        left: 32px;
        max-width: 420px;
        margin: 0 auto;
        font-size: 14px;
        line-height: 18px;
    }

    .of-map-canvas {
        min-height: 0;
    }
}

/* Desktop T5 map refinement 2026-06-04 v2 */
@media (min-width: 1280px) {
    #of-home-ctn[data-results-state="ready"] .of-map-status {
        display: none;
    }

    #of-home-ctn[data-results-state="initial"] .of-map-status,
    #of-home-ctn:not([data-results-state]) .of-map-status {
        right: 40px;
        bottom: calc(var(--of-flow-desktop-footer-height, 56px) + 24px);
        left: 40px;
    }
}

/* T5 mobile feedback: markers keep their classification colour but no longer show numbers. */
@media (max-width: 479px) {
    .of-map-marker__index {
        display: none;
    }
}


/* T5 mobile SVG markers: physical SVG assets, transparent canvas, bounce only for selected. */
@media (max-width: 479px) {
    .of-map-marker--image {
        width: 30px;
        height: 38px;
        overflow: visible;
        line-height: 0;
        background: transparent;
        border: 0;
        filter: drop-shadow(0 7px 10px rgba(15, 53, 73, 0.24));
    }


    .of-map-marker--svg {
        background: transparent;
        background-color: transparent;
    }

    .of-map-marker--image img {
        display: block;
        width: 30px;
        height: 38px;
        object-fit: contain;
        background: transparent;
        border: 0;
        pointer-events: none;
    }

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

    .of-map-marker--image.of-map-marker--selected {
        filter: drop-shadow(0 7px 10px rgba(15, 53, 73, 0.24));
    }

    .of-map-marker__index {
        display: none;
    }
}

/* Pass 10.6: Velocity M uses the map as a full rectangular surface, without rounded corners. */
@media (min-width: 740px) {
    .of-map-shell {
        border-radius: 0;
    }
}

/* Pass 10.6: tablet portrait keeps the mobile horizontal result rail but markers must not be numbered. */
@media (min-width: 740px) and (max-width: 959px) {
    .of-map-marker__index {
        display: none;
    }
}

/* Pass 10.9: Velocity M / tablet portrait T5 keeps map rectangular and unnumbered. */
@media (min-width: 740px) and (max-width: 959px) {
    .of-map-shell {
        border-radius: 0;
    }

    .of-map-marker__index {
        display: none;
    }
}


/* Pass 10.10: global map rules. Markers are visual pins only and the map surface is rectangular at every size. */
.of-map-shell {
    border-radius: 0;
}

.of-map-marker__index {
    display: none !important;
}


/* Pass 10.83: keep map markers the same larger size across all breakpoints. */
.of-map-marker {
    width: 56px;
    height: 74px;
}

.of-map-marker--image {
    width: 50px;
    height: 66px;
    overflow: visible;
    line-height: 0;
}

.of-map-marker--image img {
    width: 50px;
    height: 66px;
}

@media (max-width: 479px) {
    .of-map-marker {
        width: 56px !important;
        height: 74px !important;
    }

    .of-map-marker--image {
        width: 50px !important;
        height: 66px !important;
        overflow: visible !important;
        line-height: 0 !important;
    }

    .of-map-marker--image img {
        width: 50px !important;
        height: 66px !important;
    }
}


/* Pass 10.84: final marker sizing — identical and larger in mobile/tablet/desktop. */
.of-map-marker {
    width: 64px !important;
    height: 84px !important;
}

.of-map-marker--image {
    width: 58px !important;
    height: 76px !important;
    overflow: visible !important;
    line-height: 0 !important;
}

.of-map-marker--image img {
    width: 58px !important;
    height: 76px !important;
}


/* Hide the initial map status completely: the map should not show any "Mapa sem valores" box before search. */
#of-results-map-panel[data-map-state="initial"] .of-map-status--initial {
    display: none !important;
}

/* Pass 11.41: hide empty coordinate message overlay. */
#of-results-map-panel[data-map-state="empty"] .of-map-status--empty {
    display: none !important;
}

.of-map-info-window__phone-link {
    color: inherit;
    text-decoration: none;
}

.of-map-info-window__phone-link:hover,
.of-map-info-window__phone-link:focus {
    text-decoration: underline;
}

/* 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;
}

.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 { color: #0f3549; background: #ffdc46; }
.of-classification--green { color: #ffffff; background: #008282; }
.of-classification--yellow { color: #ffffff; background: #0f3549; }
.of-classification--orange { color: #ffffff; background: #005a9c; }
.of-classification--non-preferential,
.of-classification--red,
.of-classification--black,
.of-classification--brown,
.of-classification--cyan,
.of-classification--unknown { color: #0f3549; background: #9de0e0; }

.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: "";
    font-weight: 600;
    color: var(--ayvens-theme-brand-secondary-400, #0f3549);
}

@media (max-width: 1279px) {
    .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: 28px 12px 52px 16px;
        gap: 0;
        border-radius: 5px;
    }

    .of-results-partner-card__index {
        display: none;
    }

    .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;
    }

    .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;
        font-weight: 500;
        line-height: 13px;
        width: auto;
    }


}

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

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

    .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;
    -ms-overflow-style: none;
}

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

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

/* Desktop vertical results list 2026-06-04 */
@media (min-width: 1280px) {
    .of-home__results-partners {
        pointer-events: none;
    }

    .of-home__results-partners > .of-wireframe-footer {
        padding: 10px;
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(15, 53, 73, 0.10);
        border-radius: 5px;
        box-shadow: 0 14px 34px rgba(15, 53, 73, 0.16);
        pointer-events: auto;
    }

    .of-results-partners-list {
        gap: 8px;
        height: 100%;
        padding: 0;
    }

    .of-results-partner-card {
        grid-template-rows: auto auto auto;
        min-height: 108px;
        gap: 8px;
        padding: 12px 12px 12px 46px;
        border-radius: 5px;
        box-shadow: none;
    }

    .of-results-partner-card:hover,
    .of-results-partner-card:focus-visible,
    .of-results-partner-card--map-hover {
        transform: none;
    }

    .of-results-partner-card__index {
        top: 12px;
        left: 12px;
        width: 24px;
        height: 24px;
        font-size: 12px;
        font-weight: 500;
    }

    .of-results-partner-card__name {
        font-size: 13px;
        line-height: 17px;
    }

    .of-results-partner-card__classification {
        min-width: 56px;
        height: 14px;
        font-size: 7px;
        line-height: 9px;
    }

    .of-results-partner-card__address {
        font-size: 11px;
        line-height: 15px;
        -webkit-line-clamp: 2;
    }

    .of-results-partner-card__meta {
        gap: 5px;
        font-size: 11px;
        line-height: 14px;
    }

    .of-results-partner-card__distance,
    .of-results-partner-card__phone {
        min-height: 20px;
        padding: 1px 7px;
    }

    .of-results-partner-card__distance::before {
        width: 18px;
        height: 18px;
    }

    .of-results-partner-card__select {
        min-height: 26px;
        padding: 5px 10px;
        font-size: 11px;
        line-height: 13px;
    }
}

/* Desktop T5 vertical partner list refinement 2026-06-04 v2 */
@media (min-width: 1280px) {
    .of-home__results-partners > .of-wireframe-footer {
        padding: 12px;
        background: rgba(255, 255, 255, 0.97);
        border: 1px solid rgba(15, 53, 73, 0.12);
        border-radius: 8px;
        box-shadow: 0 16px 38px rgba(15, 53, 73, 0.18);
    }

    .of-results-partners-list {
        align-content: start;
        gap: 10px;
        height: 100%;
        padding: 0 2px 0 0;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .of-results-partner-card {
        grid-template-rows: auto auto auto;
        min-height: 124px;
        gap: 9px;
        padding: 13px 13px 12px 48px;
        background: #ffffff;
        border-color: rgba(15, 53, 73, 0.14);
        border-radius: 6px;
        box-shadow: none;
    }

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

    .of-results-partner-card__index {
        top: 13px;
        left: 13px;
        width: 26px;
        height: 26px;
        font-size: 12px;
        font-weight: 500;
    }

    .of-results-partner-card__header {
        gap: 8px;
        align-items: start;
    }

    .of-results-partner-card__name {
        font-size: 14px;
        line-height: 18px;
        white-space: nowrap;
    }

    .of-results-partner-card__classification {
        min-width: 64px;
        height: 15px;
        padding: 0 6px;
        font-size: 7px;
        line-height: 9px;
    }

    .of-results-partner-card__address {
        margin-top: 2px;
        font-size: 12px;
        line-height: 16px;
        -webkit-line-clamp: 2;
    }

    .of-results-partner-card__meta {
        gap: 6px;
        font-size: 11px;
        line-height: 14px;
    }

    .of-results-partner-card__distance,
    .of-results-partner-card__phone {
        min-height: 22px;
        padding: 2px 8px;
        background: #f7f9fa;
    }

    .of-results-partner-card__distance::before {
        width: 18px;
        height: 18px;
        margin-right: 4px;
    }

    .of-results-partner-card__select {
        align-self: end;
        min-height: 28px;
        padding: 6px 12px;
        font-size: 12px;
        line-height: 14px;
    }
}

/* Desktop T5 list overlay cleanup 2026-06-04 v3 */
@media (min-width: 1280px) {
    .of-home__results-partners {
        background: transparent;
        overflow: visible;
    }

    .of-home__results-partners > .of-wireframe-footer {
        min-height: 0;
        height: 100%;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
    }

    .of-results-partners-list {
        height: 100%;
        max-height: 100%;
        padding: 0 2px 16px 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .of-results-partner-card {
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 8px 22px rgba(15, 53, 73, 0.12);
    }

    .of-results-partner-card--selected {
        box-shadow: 0 0 0 1px rgba(15, 53, 73, 0.14), 0 10px 24px rgba(15, 53, 73, 0.14);
    }
}

/* Desktop T5 card-only selection 2026-06-04 v4 */
@media (min-width: 1280px) {
    .of-home__results-partners {
        overflow: hidden;
    }

    .of-home__results-partners > .of-wireframe-footer {
        height: 100%;
        overflow: hidden;
    }

    .of-results-partners-list {
        height: 100%;
        max-height: 100%;
        gap: 10px;
        padding: 0 2px 0 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .of-results-partner-card {
        min-height: 94px;
        gap: 6px;
        padding: 12px 12px 12px 46px;
        cursor: pointer;
    }

    .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 0 0 1px rgba(15, 53, 73, 0.16), 0 10px 24px rgba(15, 53, 73, 0.16);
        transform: none;
    }

    .of-results-partner-card__header {
        gap: 8px;
    }

    .of-results-partner-card__address {
        margin-top: 0;
        line-height: 15px;
        -webkit-line-clamp: 2;
    }

    .of-results-partner-card__meta {
        gap: 6px;
    }

    .of-results-partner-card__distance,
    .of-results-partner-card__phone {
        min-height: 20px;
        padding-top: 1px;
        padding-bottom: 1px;
    }

    .of-results-partner-card__select {
        display: none;
    }
}



/* Desktop T5 balance refinement 2026-06-04 v5 */
@media (min-width: 1280px) {
    .of-home__results-partners {
        overflow: hidden;
    }

    .of-home__results-partners > .of-wireframe-footer {
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .of-results-partners-list {
        align-content: start;
        height: 100%;
        max-height: 100%;
        gap: 8px;
        padding: 0 1px 0 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .of-results-partner-card {
        min-height: 84px;
        gap: 5px;
        padding: 10px 10px 10px 40px;
        border-radius: 5px;
    }

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

    .of-results-partner-card__header {
        gap: 6px;
    }

    .of-results-partner-card__name {
        font-size: 13px;
        line-height: 16px;
    }

    .of-results-partner-card__classification {
        min-width: 52px;
        height: 13px;
        padding: 0 5px;
        font-size: 6.5px;
        line-height: 8px;
    }

    .of-results-partner-card__address {
        font-size: 11px;
        line-height: 14px;
        -webkit-line-clamp: 2;
    }

    .of-results-partner-card__meta {
        gap: 5px;
        font-size: 11px;
        line-height: 14px;
    }

    .of-results-partner-card__distance,
    .of-results-partner-card__phone {
        min-height: 18px;
        padding: 1px 6px;
    }

    .of-results-partner-card__distance::before {
        width: 16px;
        height: 16px;
        margin-right: 3px;
    }
}

/* Pass 10.11-v2: T5 responsive result cards matrix for Velocity S/M.
   Rebuilds the 480-959px card layout from one rule set, keeping XS and desktop phases untouched. */
@media (min-width: 480px) and (max-width: 959px) {
    .of-home__results-partners {
        pointer-events: none;
    }

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

    .of-results-partners-list {
        display: flex;
        align-items: stretch;
        gap: 12px;
        height: 138px;
        min-height: 138px;
        max-height: 138px;
        padding: 0 0 0 4px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
    }

    .of-results-partner-card {
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto auto;
        flex: 0 0 218px;
        width: 218px;
        min-width: 218px;
        height: 138px;
        min-height: 138px;
        gap: 6px;
        padding: 10px 12px 10px;
        border-radius: 5px;
        box-shadow: 0 4px 14px rgba(15, 53, 73, 0.14);
        scroll-snap-align: start;
    }

    .of-results-partner-card__index {
        display: none;
    }

    .of-results-partner-card__main {
        display: grid;
        grid-template-rows: auto;
        min-width: 0;
        min-height: 0;
    }

    .of-results-partner-card__header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "spacer badge"
            "name name";
        column-gap: 8px;
        row-gap: 4px;
        align-items: start;
        min-width: 0;
    }

    .of-results-partner-card__name {
        grid-area: name;
        min-width: 0;
        max-width: 100%;
        margin: 0;
        padding: 0;
        font-size: 12px;
        font-weight: 600;
        line-height: 16px;
        white-space: normal;
        overflow: hidden;
        text-overflow: clip;
        overflow-wrap: anywhere;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .of-results-partner-card__classification {
        grid-area: badge;
        position: static;
        align-self: start;
        justify-self: end;
        min-width: 80px;
        max-width: 94px;
        height: 19px;
        min-height: 19px;
        padding: 2px 7px;
        font-size: 10px;
        font-weight: 500;
        line-height: 12px;
        letter-spacing: 0;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border-radius: 3px;
    }

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

    .of-results-partner-card__meta {
        display: flex;
        align-items: center;
        min-width: 0;
        margin: 0;
        padding: 0;
        font-size: 12px;
        line-height: 16px;
    }

    .of-results-partner-card__distance {
        min-height: 20px;
        padding: 0;
        color: var(--ayvens-theme-brand-secondary-400, #0f3549);
        background: transparent;
        border: 0;
        border-radius: 0;
        font-size: 12px;
        font-weight: 500;
        line-height: 16px;
    }

    .of-results-partner-card__distance::before {
        width: 18px;
        height: 18px;
        margin-right: 3px;
    }

    .of-results-partner-card__select {
        justify-self: end;
        align-self: end;
        width: auto;
        min-height: 28px;
        margin: 0;
        padding: 5px 11px;
        font-size: 11px;
        font-weight: 500;
        line-height: 13px;
        border-radius: 999px;
    }
}

@media (min-width: 480px) and (max-width: 739px) {
    .of-results-partners-list {
        height: 138px;
        min-height: 138px;
        max-height: 138px;
        gap: 12px;
    }

    .of-results-partner-card {
        flex-basis: 206px;
        width: 206px;
        min-width: 206px;
        height: 138px;
        min-height: 138px;
    }
}

@media (min-width: 740px) and (max-width: 959px) {
    .of-results-partners-list {
        height: 138px;
        min-height: 138px;
        max-height: 138px;
        gap: 12px;
    }

    .of-results-partner-card {
        flex-basis: 218px;
        width: 218px;
        min-width: 218px;
        height: 138px;
        min-height: 138px;
    }
}

/* Pass 10.12-v2: T5 result cards for Velocity L (960-1279px).
   This keeps the same horizontal card structure validated for S/M and avoids the 1280px+ desktop vertical list. */
@media (min-width: 960px) and (max-width: 1279px) {
    .of-home__results-partners {
        pointer-events: none;
    }

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

    .of-results-partners-list {
        display: flex;
        align-items: stretch;
        gap: 12px;
        height: 138px;
        min-height: 138px;
        max-height: 138px;
        padding: 0 0 0 4px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
    }

    .of-results-partner-card {
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto auto;
        flex: 0 0 224px;
        width: 224px;
        min-width: 224px;
        height: 138px;
        min-height: 138px;
        gap: 6px;
        padding: 10px 12px 10px;
        border-radius: 5px;
        box-shadow: 0 4px 14px rgba(15, 53, 73, 0.14);
        scroll-snap-align: start;
    }

    .of-results-partner-card__index {
        display: none;
    }

    .of-results-partner-card__main {
        display: grid;
        grid-template-rows: auto;
        min-width: 0;
        min-height: 0;
    }

    .of-results-partner-card__header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "spacer badge"
            "name name";
        column-gap: 8px;
        row-gap: 4px;
        align-items: start;
        min-width: 0;
    }

    .of-results-partner-card__name {
        grid-area: name;
        min-width: 0;
        max-width: 100%;
        margin: 0;
        padding: 0;
        font-size: 12px;
        font-weight: 600;
        line-height: 16px;
        white-space: normal;
        overflow: hidden;
        text-overflow: clip;
        overflow-wrap: anywhere;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .of-results-partner-card__classification {
        grid-area: badge;
        position: static;
        align-self: start;
        justify-self: end;
        min-width: 80px;
        max-width: 94px;
        height: 19px;
        min-height: 19px;
        padding: 2px 7px;
        font-size: 10px;
        font-weight: 500;
        line-height: 12px;
        letter-spacing: 0;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border-radius: 3px;
    }

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

    .of-results-partner-card__meta {
        display: flex;
        align-items: center;
        min-width: 0;
        margin: 0;
        padding: 0;
        font-size: 12px;
        line-height: 16px;
    }

    .of-results-partner-card__distance {
        min-height: 20px;
        padding: 0;
        color: var(--ayvens-theme-brand-secondary-400, #0f3549);
        background: transparent;
        border: 0;
        border-radius: 0;
        font-size: 12px;
        font-weight: 500;
        line-height: 16px;
    }

    .of-results-partner-card__distance::before {
        width: 18px;
        height: 18px;
        margin-right: 3px;
    }

    .of-results-partner-card__select {
        justify-self: end;
        align-self: end;
        width: auto;
        min-height: 28px;
        margin: 0;
        padding: 5px 11px;
        font-size: 11px;
        font-weight: 500;
        line-height: 13px;
        border-radius: 999px;
    }
}

/* Pass 10.17: T5 desktop vertical partner list for 1280px+.
   This is the first desktop-only result-list pass; tablet ranges remain horizontal. */
@media (min-width: 1280px) {
    .of-home__results-partners {
        display: grid;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        background: transparent;
        pointer-events: none;
    }

    .of-home__results-partners > .of-wireframe-footer {
        display: grid;
        grid-template-rows: minmax(0, 1fr);
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        padding: 0;
        overflow: hidden;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        pointer-events: auto;
    }

    .of-results-partners-list {
        display: grid;
        align-content: start;
        grid-auto-rows: max-content;
        gap: 10px;
        width: 100%;
        height: 100%;
        max-height: 100%;
        min-width: 0;
        min-height: 0;
        padding: 0 2px 0 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scroll-snap-type: none;
    }

    .of-results-partner-card {
        display: grid;
        grid-template-rows: auto auto auto;
        width: 100%;
        min-width: 0;
        min-height: 132px;
        gap: 8px;
        padding: 12px;
        color: var(--ayvens-theme-brand-secondary-400, #0f3549);
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid rgba(15, 53, 73, 0.14);
        border-radius: 5px;
        box-shadow: 0 8px 22px rgba(15, 53, 73, 0.12);
        cursor: pointer;
    }

    .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 0 0 1px rgba(15, 53, 73, 0.16), 0 10px 24px rgba(15, 53, 73, 0.16);
        transform: none;
    }

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

    .of-results-partner-card__index {
        display: none;
    }

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

    .of-results-partner-card__header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "spacer badge"
            "name name";
        column-gap: 8px;
        row-gap: 5px;
        align-items: start;
        min-width: 0;
    }

    .of-results-partner-card__name {
        grid-area: name;
        min-width: 0;
        max-width: 100%;
        margin: 0;
        padding: 0;
        font-size: 14px;
        font-weight: 600;
        line-height: 18px;
        white-space: normal;
        overflow: hidden;
        text-overflow: clip;
        overflow-wrap: anywhere;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .of-results-partner-card__classification {
        grid-area: badge;
        position: static;
        align-self: start;
        justify-self: end;
        min-width: 80px;
        max-width: 104px;
        height: 19px;
        min-height: 19px;
        padding: 2px 7px;
        font-size: 10px;
        font-weight: 500;
        line-height: 12px;
        letter-spacing: 0;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border-radius: 3px;
    }

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

    .of-results-partner-card__meta {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
        min-width: 0;
        margin: 0;
        padding: 0;
        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;
        color: var(--ayvens-theme-brand-secondary-400, #0f3549);
        background: #f7f9fa;
        border: 1px solid rgba(15, 53, 73, 0.08);
        border-radius: 999px;
        white-space: nowrap;
    }

    .of-results-partner-card__distance::before {
        width: 18px;
        height: 18px;
        margin-right: 4px;
    }

    .of-results-partner-card__select {
        display: none;
    }
}


.of-results-partner-card__directions {
    display: none;
}

/* Pass 10.21: desktop left-column card layout.
   Structure: distance + classification, then name + actions, then phone. */
@media (min-width: 1280px) {
    .of-home__results-partners > .of-wireframe-title {
        display: block;
        margin: 0 0 10px 0;
        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: 22px;
        letter-spacing: 0.2px;
    }

    .of-home__results-partners > .of-wireframe-footer {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        padding: 0;
        overflow: hidden;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        pointer-events: auto;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-message--ready,
    #of-home-ctn[data-results-state="empty"] .of-results-message--empty {
        display: block;
        margin: 0 0 8px 0;
        color: var(--of-text-muted, #465564);
        font-size: 11px;
        font-weight: 400;
        line-height: 14px;
    }

    .of-results-partners-list {
        display: grid;
        align-content: start;
        grid-auto-rows: max-content;
        gap: 8px;
        width: 100%;
        height: 100%;
        max-height: 100%;
        min-width: 0;
        min-height: 0;
        padding: 0 4px 0 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scroll-snap-type: none;
    }

    .of-results-partner-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas:
            "distance distance badge"
            "name book directions"
            "phone phone phone";
        column-gap: 8px;
        row-gap: 6px;
        align-items: center;
        width: 100%;
        min-width: 0;
        min-height: 92px;
        padding: 10px;
        color: var(--ayvens-theme-brand-secondary-400, #0f3549);
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid rgba(15, 53, 73, 0.14);
        border-radius: 5px;
        box-shadow: none;
        cursor: pointer;
    }

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

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

    .of-results-partner-card__address {
        display: none;
    }

    .of-results-partner-card__distance {
        grid-area: distance;
        justify-self: start;
        display: inline-flex;
        align-items: center;
        min-height: 18px;
        padding: 0;
        color: var(--of-text-muted, #465564);
        background: transparent;
        border: 0;
        border-radius: 0;
        font-size: 10px;
        font-weight: 400;
        line-height: 13px;
        white-space: nowrap;
    }

    .of-results-partner-card__distance::before {
        display: none;
    }

    .of-results-partner-card__classification {
        grid-area: badge;
        position: static;
        justify-self: end;
        align-self: center;
        min-width: 68px;
        max-width: 108px;
        height: 18px;
        min-height: 18px;
        padding: 2px 7px;
        font-size: 9.5px;
        font-weight: 500;
        line-height: 12px;
        letter-spacing: 0;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border-radius: 3px;
    }

    .of-results-partner-card__name {
        grid-area: name;
        min-width: 0;
        max-width: 100%;
        margin: 0;
        padding: 0;
        color: var(--ayvens-theme-brand-secondary-400, #0f3549);
        font-size: 12px;
        font-weight: 700;
        line-height: 15px;
        white-space: normal;
        overflow: hidden;
        text-overflow: clip;
        overflow-wrap: anywhere;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .of-results-partner-card__phone {
        grid-area: phone;
        justify-self: start;
        display: inline-flex;
        align-items: center;
        min-height: 18px;
        padding: 0;
        color: var(--ayvens-theme-brand-secondary-400, #0f3549);
        background: transparent;
        border: 0;
        border-radius: 0;
        font-size: 10px;
        font-weight: 500;
        line-height: 13px;
        white-space: nowrap;
    }

    .of-results-partner-card__phone::before {
        content: "";
        margin-right: 3px;
        font-weight: 500;
    }

    .of-results-partner-card__select,
    .of-results-partner-card__directions {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        min-height: 28px;
        margin: 0;
        padding: 6px 9px;
        font-size: 10px;
        font-weight: 600;
        line-height: 12px;
        border-radius: 999px;
        cursor: pointer;
    }

    .of-results-partner-card__select {
        grid-area: book;
        color: #ffffff;
        background: var(--ayvens-theme-brand-secondary-400, #0f3549);
        border: 1px solid var(--ayvens-theme-brand-secondary-400, #0f3549);
    }

    .of-results-partner-card__directions {
        grid-area: directions;
        color: var(--ayvens-theme-brand-secondary-400, #0f3549);
        background: #ffffff;
        border: 1px solid rgba(15, 53, 73, 0.28);
    }
    /* Pass 10.22: desktop list refinement - remove secondary label and use existing icon assets for actions. */
    #of-home-ctn[data-results-state="ready"] .of-results-message--ready {
        display: none;
    }

    .of-results-partner-card__select,
    .of-results-partner-card__directions {
        width: 30px;
        min-width: 30px;
        height: 30px;
        min-height: 30px;
        padding: 0;
        font-size: 0;
        line-height: 0;
        color: transparent;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 18px 18px;
        overflow: hidden;
    }

    .of-results-partner-card__select::before,
    .of-results-partner-card__directions::before {
        display: none;
    }

    .of-results-partner-card__select::after,
    .of-results-partner-card__directions::after {
        display: none;
        content: none;
    }

    .of-results-partner-card__select {
        background-image: url("../../Images/Flow/Icons/appointment.svg");
    }

    .of-results-partner-card__directions {
        background-image: url("../../Images/Flow/Icons/location-blue.svg");
    }

}

/* Pass 10.23: desktop results list aligned to approved desktop reference.
   This step only refines the left results list at Velocity XL+ and keeps the modal for a later step. */
@media (min-width: 1280px) {
    #of-home-ctn[data-results-state="ready"] .of-home__results-partners .of-wireframe-title,
    #of-home-ctn[data-results-state="empty"] .of-home__results-partners .of-wireframe-title,
    #of-home-ctn[data-results-state="ready"] .of-results-message--ready,
    #of-home-ctn[data-results-state="empty"] .of-results-message--ready {
        display: none;
    }

    #of-home-ctn[data-results-state="ready"] .of-home__results-partners,
    #of-home-ctn[data-results-state="empty"] .of-home__results-partners {
        padding: 8px 10px 12px 10px;
        background: #ffffff;
    }

    #of-home-ctn[data-results-state="ready"] .of-home__results-partners .of-wireframe-footer,
    #of-home-ctn[data-results-state="empty"] .of-home__results-partners .of-wireframe-footer {
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: 100%;
        gap: 0;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partners-list,
    #of-home-ctn[data-results-state="empty"] .of-results-partners-list {
        gap: 10px;
        padding: 0;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card {
        grid-template-columns: minmax(0, 1fr) 40px 40px;
        grid-template-areas:
            "name distance badge"
            "phone book directions";
        column-gap: 8px;
        row-gap: 8px;
        min-height: 86px;
        padding: 10px 10px 10px 12px;
        border: 1px solid rgba(15, 53, 73, 0.16);
        border-radius: 4px;
        background: #ffffff;
        box-shadow: none;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card:hover,
    #of-home-ctn[data-results-state="ready"] .of-results-partner-card:focus-visible,
    #of-home-ctn[data-results-state="ready"] .of-results-partner-card--map-hover,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card:hover,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card:focus-visible,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card--map-hover {
        border-color: rgba(15, 53, 73, 0.28);
        box-shadow: none;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card--selected,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card--selected {
        border-color: var(--ayvens-theme-brand-secondary-400, #0f3549);
        box-shadow: 0 0 0 1px var(--ayvens-theme-brand-secondary-400, #0f3549);
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__classification,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__classification {
        grid-area: badge;
        justify-self: end;
        align-self: start;
        min-width: 90px;
        max-width: 90px;
        height: 22px;
        min-height: 22px;
        padding: 4px 8px;
        font-size: 10px;
        line-height: 14px;
        border-radius: 3px;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__distance,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__distance {
        grid-area: distance;
        justify-self: end;
        align-self: start;
        min-height: 22px;
        font-size: 11px;
        line-height: 14px;
        color: var(--of-text-muted, #465564);
        white-space: nowrap;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__name,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__name {
        grid-area: name;
        align-self: end;
        font-size: 12px;
        line-height: 16px;
        font-weight: 700;
        -webkit-line-clamp: 2;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__phone,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__phone {
        grid-area: phone;
        align-self: start;
        font-size: 11px;
        line-height: 14px;
        font-weight: 500;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__phone::before,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__phone::before {
        content: "";
        margin-right: 4px;
        font-weight: 500;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__select,
    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__directions,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__select,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__directions {
        width: 34px;
        min-width: 34px;
        height: 34px;
        min-height: 34px;
        align-self: center;
        justify-self: center;
        border-radius: 999px;
        background-size: 16px 16px;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__select,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__select {
        grid-area: book;
        background-color: var(--ayvens-theme-brand-secondary-400, #0f3549);
        border: 1px solid var(--ayvens-theme-brand-secondary-400, #0f3549);
        background-image: url("../../Images/Flow/Icons/appointment.svg");
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__directions,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__directions {
        grid-area: directions;
        background-color: #ffffff;
        border: 1px solid rgba(15, 53, 73, 0.28);
        background-image: url("../../Images/Flow/Icons/location-blue.svg");
    }
}


/* Pass 10.24: desktop left list fine-tune against client reference.
   Fixes distance/badge overlap, action icon sizing and selected-card visual balance at Velocity XL+. */
@media (min-width: 1280px) {
    #of-home-ctn[data-results-state="ready"] .of-results-partner-card,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card {
        grid-template-columns: minmax(0, 1fr) 38px 38px;
        grid-template-areas:
            "distance badge badge"
            "name book directions"
            "phone book directions";
        column-gap: 8px;
        row-gap: 6px;
        min-height: 92px;
        padding: 10px 10px 10px 12px;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__distance,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__distance {
        grid-area: distance;
        justify-self: start;
        align-self: start;
        min-width: 0;
        max-width: 100%;
        min-height: 20px;
        padding: 0;
        font-size: 10.5px;
        line-height: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__classification,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__classification {
        grid-area: badge;
        justify-self: end;
        align-self: start;
        width: auto;
        min-width: 86px;
        max-width: 98px;
        height: 22px;
        min-height: 22px;
        padding: 4px 8px;
        font-size: 10px;
        line-height: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__name,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__name {
        grid-area: name;
        align-self: center;
        min-width: 0;
        padding-right: 2px;
        font-size: 12px;
        line-height: 16px;
        -webkit-line-clamp: 2;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__phone,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__phone {
        grid-area: phone;
        align-self: start;
        min-height: 16px;
        font-size: 10.5px;
        line-height: 14px;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__select,
    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__directions,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__select,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__directions {
        width: 38px;
        min-width: 38px;
        height: 38px;
        min-height: 38px;
        padding: 0;
        align-self: center;
        justify-self: center;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 21px 21px;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__select,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__select {
        grid-area: book;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__directions,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__directions {
        grid-area: directions;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__select::before,
    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__select::after,
    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__directions::before,
    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__directions::after,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__select::before,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__select::after,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__directions::before,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__directions::after {
        display: none;
        content: none;
    }
}

/* Pass 10.28: desktop list cards as left-column view, not map overlay. */
@media (min-width: 1280px) {
    #of-home-ctn[data-results-state="ready"] .of-home__results-partners .of-wireframe-title,
    #of-home-ctn[data-results-state="empty"] .of-home__results-partners .of-wireframe-title,
    #of-home-ctn[data-results-state="ready"] .of-results-message--ready,
    #of-home-ctn[data-results-state="empty"] .of-results-message--ready {
        display: none;
    }

    #of-home-ctn[data-results-state="ready"] .of-home__results-partners .of-wireframe-footer,
    #of-home-ctn[data-results-state="empty"] .of-home__results-partners .of-wireframe-footer {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partners-list,
    #of-home-ctn[data-results-state="empty"] .of-results-partners-list {
        display: grid;
        align-content: start;
        grid-auto-rows: max-content;
        gap: 10px;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        padding: 0;
        overflow-x: hidden;
        overflow-y: auto;
        scroll-snap-type: none;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 38px 38px;
        grid-template-areas:
            "distance badge badge"
            "name book directions"
            "phone book directions";
        column-gap: 8px;
        row-gap: 6px;
        align-items: center;
        width: 100%;
        min-width: 0;
        min-height: 96px;
        padding: 10px 10px 10px 12px;
        color: var(--ayvens-theme-brand-secondary-400, #0f3549);
        background: #ffffff;
        border: 1px solid rgba(15, 53, 73, 0.16);
        border-radius: 4px;
        box-shadow: none;
        box-sizing: border-box;
        cursor: pointer;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card:hover,
    #of-home-ctn[data-results-state="ready"] .of-results-partner-card:focus-visible,
    #of-home-ctn[data-results-state="ready"] .of-results-partner-card--map-hover,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card:hover,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card:focus-visible,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card--map-hover {
        border-color: rgba(15, 53, 73, 0.28);
        box-shadow: none;
        transform: none;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card--selected,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card--selected {
        border-color: var(--ayvens-theme-brand-secondary-400, #0f3549);
        box-shadow: 0 0 0 1px var(--ayvens-theme-brand-secondary-400, #0f3549);
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__main,
    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__header,
    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__meta,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__main,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__header,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__meta {
        display: contents;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__address,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__address {
        display: none;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__distance,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__distance {
        grid-area: distance;
        justify-self: start;
        align-self: start;
        display: inline-flex;
        align-items: center;
        max-width: 100%;
        min-width: 0;
        min-height: 20px;
        padding: 0;
        color: var(--of-text-muted, #465564);
        background: transparent;
        border: 0;
        border-radius: 0;
        font-size: 10.5px;
        font-weight: 400;
        line-height: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__distance::before,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__distance::before {
        display: none;
        content: none;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__classification,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__classification {
        grid-area: badge;
        position: static;
        justify-self: end;
        align-self: start;
        width: auto;
        min-width: 86px;
        max-width: 102px;
        height: 22px;
        min-height: 22px;
        padding: 4px 8px;
        font-size: 10px;
        font-weight: 500;
        line-height: 14px;
        letter-spacing: 0;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border-radius: 3px;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__name,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__name {
        grid-area: name;
        align-self: center;
        min-width: 0;
        max-width: 100%;
        margin: 0;
        padding: 0;
        color: var(--ayvens-theme-brand-secondary-400, #0f3549);
        font-size: 12px;
        font-weight: 700;
        line-height: 16px;
        overflow: hidden;
        text-overflow: clip;
        overflow-wrap: anywhere;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__phone,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__phone {
        grid-area: phone;
        justify-self: start;
        align-self: start;
        display: inline-flex;
        align-items: center;
        min-height: 16px;
        padding: 0;
        color: var(--ayvens-theme-brand-secondary-400, #0f3549);
        background: transparent;
        border: 0;
        border-radius: 0;
        font-size: 10.5px;
        font-weight: 500;
        line-height: 14px;
        white-space: nowrap;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__phone::before,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__phone::before {
        content: "";
        margin-right: 4px;
        font-weight: 500;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__select,
    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__directions,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__select,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__directions {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        min-width: 38px;
        height: 38px;
        min-height: 38px;
        margin: 0;
        padding: 0;
        color: transparent;
        font-size: 0;
        line-height: 0;
        border-radius: 999px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 20px 20px;
        overflow: hidden;
        cursor: pointer;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__select,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__select {
        grid-area: book;
        align-self: center;
        justify-self: center;
        background-color: var(--ayvens-theme-brand-secondary-400, #0f3549);
        background-image: url("../../Images/Flow/Icons/appointment.svg");
        border: 1px solid var(--ayvens-theme-brand-secondary-400, #0f3549);
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__directions,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__directions {
        grid-area: directions;
        align-self: center;
        justify-self: center;
        background-color: #ffffff;
        background-image: url("../../Images/Flow/Icons/location-blue.svg");
        border: 1px solid rgba(15, 53, 73, 0.28);
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__select::before,
    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__select::after,
    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__directions::before,
    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__directions::after,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__select::before,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__select::after,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__directions::before,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__directions::after {
        display: none;
        content: none;
    }
}

/* Pass 10.29: partners panel inside the real desktop left-list view. */
@media (min-width: 1280px) {
    #of-home-ctn[data-results-state="ready"] .of-results-desktop-list-view .of-home__results-partners,
    #of-home-ctn[data-results-state="empty"] .of-results-desktop-list-view .of-home__results-partners {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        z-index: auto;
        display: grid;
        grid-template-rows: minmax(0, 1fr);
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        min-width: 0;
        min-height: 0;
        padding: 0;
        background: transparent;
        overflow: hidden;
        box-sizing: border-box;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-desktop-list-view .of-wireframe-title,
    #of-home-ctn[data-results-state="empty"] .of-results-desktop-list-view .of-wireframe-title,
    #of-home-ctn[data-results-state="ready"] .of-results-desktop-list-view .of-results-message,
    #of-home-ctn[data-results-state="empty"] .of-results-desktop-list-view .of-results-message {
        display: none;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-desktop-list-view .of-wireframe-footer,
    #of-home-ctn[data-results-state="empty"] .of-results-desktop-list-view .of-wireframe-footer {
        display: grid;
        grid-template-rows: minmax(0, 1fr);
        min-width: 0;
        min-height: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-desktop-list-view .of-results-partners-list,
    #of-home-ctn[data-results-state="empty"] .of-results-desktop-list-view .of-results-partners-list {
        display: grid;
        align-content: start;
        grid-auto-rows: max-content;
        gap: 10px;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        padding: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-desktop-list-view .of-results-partner-card,
    #of-home-ctn[data-results-state="empty"] .of-results-desktop-list-view .of-results-partner-card {
        grid-template-columns: minmax(0, 1fr) 38px 38px;
        grid-template-areas:
            "distance badge badge"
            "name book directions"
            "phone book directions";
        column-gap: 8px;
        row-gap: 6px;
        min-height: 92px;
        width: 100%;
        padding: 10px 10px 10px 12px;
        border: 1px solid rgba(15, 53, 73, 0.16);
        border-radius: 4px;
        background: #ffffff;
        box-shadow: none;
        box-sizing: border-box;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-desktop-list-view .of-results-partner-card--selected,
    #of-home-ctn[data-results-state="empty"] .of-results-desktop-list-view .of-results-partner-card--selected {
        border-color: var(--ayvens-theme-brand-secondary-400, #0f3549);
        box-shadow: 0 0 0 1px var(--ayvens-theme-brand-secondary-400, #0f3549);
    }

    #of-home-ctn[data-results-state="ready"] .of-results-desktop-list-view .of-results-partner-card__main,
    #of-home-ctn[data-results-state="ready"] .of-results-desktop-list-view .of-results-partner-card__header,
    #of-home-ctn[data-results-state="ready"] .of-results-desktop-list-view .of-results-partner-card__meta,
    #of-home-ctn[data-results-state="empty"] .of-results-desktop-list-view .of-results-partner-card__main,
    #of-home-ctn[data-results-state="empty"] .of-results-desktop-list-view .of-results-partner-card__header,
    #of-home-ctn[data-results-state="empty"] .of-results-desktop-list-view .of-results-partner-card__meta {
        display: contents;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-desktop-list-view .of-results-partner-card__address,
    #of-home-ctn[data-results-state="empty"] .of-results-desktop-list-view .of-results-partner-card__address {
        display: none;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-desktop-list-view .of-results-partner-card__distance,
    #of-home-ctn[data-results-state="empty"] .of-results-desktop-list-view .of-results-partner-card__distance {
        grid-area: distance;
        justify-self: start;
        align-self: start;
        display: inline-flex;
        min-height: 20px;
        padding: 0;
        font-size: 10.5px;
        line-height: 14px;
        font-weight: 400;
        color: var(--of-text-muted, #465564);
        background: transparent;
        border: 0;
        white-space: nowrap;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-desktop-list-view .of-results-partner-card__distance::before,
    #of-home-ctn[data-results-state="empty"] .of-results-desktop-list-view .of-results-partner-card__distance::before {
        display: none;
        content: none;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-desktop-list-view .of-results-partner-card__classification,
    #of-home-ctn[data-results-state="empty"] .of-results-desktop-list-view .of-results-partner-card__classification {
        grid-area: badge;
        position: static;
        justify-self: end;
        align-self: start;
        width: auto;
        min-width: 86px;
        max-width: 98px;
        height: 22px;
        min-height: 22px;
        padding: 4px 8px;
        font-size: 10px;
        line-height: 14px;
        font-weight: 500;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border-radius: 3px;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-desktop-list-view .of-results-partner-card__name,
    #of-home-ctn[data-results-state="empty"] .of-results-desktop-list-view .of-results-partner-card__name {
        grid-area: name;
        align-self: center;
        min-width: 0;
        margin: 0;
        padding: 0 2px 0 0;
        color: var(--ayvens-theme-brand-secondary-400, #0f3549);
        font-size: 12px;
        font-weight: 700;
        line-height: 16px;
        overflow: hidden;
        text-overflow: clip;
        overflow-wrap: anywhere;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-desktop-list-view .of-results-partner-card__phone,
    #of-home-ctn[data-results-state="empty"] .of-results-desktop-list-view .of-results-partner-card__phone {
        grid-area: phone;
        justify-self: start;
        align-self: start;
        display: inline-flex;
        min-height: 16px;
        padding: 0;
        color: var(--ayvens-theme-brand-secondary-400, #0f3549);
        background: transparent;
        border: 0;
        font-size: 10.5px;
        font-weight: 500;
        line-height: 14px;
        white-space: nowrap;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-desktop-list-view .of-results-partner-card__phone::before,
    #of-home-ctn[data-results-state="empty"] .of-results-desktop-list-view .of-results-partner-card__phone::before {
        content: "";
        margin-right: 4px;
        font-weight: 500;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-desktop-list-view .of-results-partner-card__select,
    #of-home-ctn[data-results-state="ready"] .of-results-desktop-list-view .of-results-partner-card__directions,
    #of-home-ctn[data-results-state="empty"] .of-results-desktop-list-view .of-results-partner-card__select,
    #of-home-ctn[data-results-state="empty"] .of-results-desktop-list-view .of-results-partner-card__directions {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        min-width: 38px;
        height: 38px;
        min-height: 38px;
        margin: 0;
        padding: 0;
        align-self: center;
        justify-self: center;
        color: transparent;
        font-size: 0;
        line-height: 0;
        border-radius: 999px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 20px 20px;
        overflow: hidden;
        cursor: pointer;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-desktop-list-view .of-results-partner-card__select,
    #of-home-ctn[data-results-state="empty"] .of-results-desktop-list-view .of-results-partner-card__select {
        grid-area: book;
        background-color: var(--ayvens-theme-brand-secondary-400, #0f3549);
        border: 1px solid var(--ayvens-theme-brand-secondary-400, #0f3549);
        background-image: url("../../Images/Flow/Icons/appointment.svg");
    }

    #of-home-ctn[data-results-state="ready"] .of-results-desktop-list-view .of-results-partner-card__directions,
    #of-home-ctn[data-results-state="empty"] .of-results-desktop-list-view .of-results-partner-card__directions {
        grid-area: directions;
        background-color: #ffffff;
        border: 1px solid rgba(15, 53, 73, 0.28);
        background-image: url("../../Images/Flow/Icons/location-blue.svg");
    }

    #of-home-ctn[data-results-state="ready"] .of-results-desktop-list-view .of-results-partner-card__select::before,
    #of-home-ctn[data-results-state="ready"] .of-results-desktop-list-view .of-results-partner-card__select::after,
    #of-home-ctn[data-results-state="ready"] .of-results-desktop-list-view .of-results-partner-card__directions::before,
    #of-home-ctn[data-results-state="ready"] .of-results-desktop-list-view .of-results-partner-card__directions::after,
    #of-home-ctn[data-results-state="empty"] .of-results-desktop-list-view .of-results-partner-card__select::before,
    #of-home-ctn[data-results-state="empty"] .of-results-desktop-list-view .of-results-partner-card__select::after,
    #of-home-ctn[data-results-state="empty"] .of-results-desktop-list-view .of-results-partner-card__directions::before,
    #of-home-ctn[data-results-state="empty"] .of-results-desktop-list-view .of-results-partner-card__directions::after {
        display: none;
        content: none;
    }
}

/* Pass 10.30: T5 desktop results list view reset and stable card layout. */
@media (min-width: 1280px) {
    #of-home-ctn[data-results-state="ready"] .of-home__results-partners .of-wireframe-title,
    #of-home-ctn[data-results-state="empty"] .of-home__results-partners .of-wireframe-title,
    #of-home-ctn[data-results-state="ready"] .of-results-message,
    #of-home-ctn[data-results-state="empty"] .of-results-message {
        display: none;
    }

    #of-home-ctn[data-results-state="ready"] .of-home__results-partners .of-wireframe-footer,
    #of-home-ctn[data-results-state="empty"] .of-home__results-partners .of-wireframe-footer {
        display: grid;
        grid-template-rows: minmax(0, 1fr);
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        padding: 0;
        overflow: hidden;
        box-sizing: border-box;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partners-list,
    #of-home-ctn[data-results-state="empty"] .of-results-partners-list {
        display: grid;
        align-content: start;
        grid-auto-rows: max-content;
        gap: 10px;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        padding: 0 2px 12px 0;
        overflow-x: hidden;
        overflow-y: auto;
        background: transparent;
        box-sizing: border-box;
        scroll-snap-type: none;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 38px 38px;
        grid-template-areas:
            "distance badge badge"
            "name book directions"
            "phone book directions";
        column-gap: 8px;
        row-gap: 6px;
        align-items: center;
        width: 100%;
        min-width: 0;
        min-height: 96px;
        padding: 10px 10px 10px 12px;
        color: var(--ayvens-theme-brand-secondary-400, #0f3549);
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid rgba(15, 53, 73, 0.16);
        border-radius: 4px;
        box-shadow: none;
        box-sizing: border-box;
        cursor: pointer;
        overflow: hidden;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card:hover,
    #of-home-ctn[data-results-state="ready"] .of-results-partner-card:focus-visible,
    #of-home-ctn[data-results-state="ready"] .of-results-partner-card--map-hover,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card:hover,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card:focus-visible,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card--map-hover {
        border-color: rgba(15, 53, 73, 0.35);
        box-shadow: none;
        transform: none;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card--selected,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card--selected {
        border-color: var(--ayvens-theme-brand-secondary-400, #0f3549);
        box-shadow: 0 0 0 1px var(--ayvens-theme-brand-secondary-400, #0f3549);
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__main,
    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__header,
    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__meta,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__main,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__header,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__meta {
        display: contents;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__index,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__index,
    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__address,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__address {
        display: none;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__distance,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__distance {
        grid-area: distance;
        justify-self: start;
        align-self: start;
        display: inline-flex;
        min-width: 0;
        max-width: 100%;
        min-height: 18px;
        padding: 0;
        color: var(--of-text-muted, #465564);
        background: transparent;
        border: 0;
        font-size: 10.5px;
        font-weight: 400;
        line-height: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__distance::before,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__distance::before {
        display: none;
        content: none;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__classification,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__classification {
        grid-area: badge;
        position: static;
        justify-self: end;
        align-self: start;
        width: auto;
        min-width: 86px;
        max-width: 100px;
        height: 22px;
        min-height: 22px;
        padding: 4px 8px;
        font-size: 10px;
        font-weight: 500;
        line-height: 14px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border-radius: 3px;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__name,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__name {
        grid-area: name;
        align-self: center;
        min-width: 0;
        margin: 0;
        padding: 0 2px 0 0;
        color: var(--ayvens-theme-brand-secondary-400, #0f3549);
        font-size: 12px;
        font-weight: 700;
        line-height: 16px;
        white-space: normal;
        overflow: hidden;
        text-overflow: clip;
        overflow-wrap: anywhere;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__phone,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__phone {
        grid-area: phone;
        justify-self: start;
        align-self: start;
        display: inline-flex;
        min-width: 0;
        min-height: 16px;
        padding: 0;
        color: var(--ayvens-theme-brand-secondary-400, #0f3549);
        background: transparent;
        border: 0;
        font-size: 10.5px;
        font-weight: 500;
        line-height: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__phone::before,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__phone::before {
        content: "";
        margin-right: 4px;
        font-weight: 500;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__select,
    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__directions,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__select,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__directions {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        min-width: 38px;
        height: 38px;
        min-height: 38px;
        margin: 0;
        padding: 0;
        align-self: center;
        justify-self: center;
        border-radius: 999px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 21px 21px;
        font-size: 0;
        line-height: 0;
        color: transparent;
        overflow: hidden;
        cursor: pointer;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__select,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__select {
        grid-area: book;
        background-color: var(--ayvens-theme-brand-secondary-400, #0f3549);
        border: 1px solid var(--ayvens-theme-brand-secondary-400, #0f3549);
        background-image: url("../../Images/Flow/Icons/appointment.svg");
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__directions,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__directions {
        grid-area: directions;
        background-color: #ffffff;
        border: 1px solid rgba(15, 53, 73, 0.28);
        background-image: url("../../Images/Flow/Icons/location-blue.svg");
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__select::before,
    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__select::after,
    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__directions::before,
    #of-home-ctn[data-results-state="ready"] .of-results-partner-card__directions::after,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__select::before,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__select::after,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__directions::before,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card__directions::after {
        display: none;
        content: none;
    }
}

/* Pass 10.52: keep the desktop appointment action at the same visual width as the map marker and prevent older 34px rules from clipping the 42px symbol. */
@media (min-width: 1280px) {
    #of-home-ctn[data-results-state="ready"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card button.of-results-partner-card__select,
    #of-home-ctn[data-results-state="empty"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card button.of-results-partner-card__select {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 42px;
        width: 42px;
        min-width: 42px;
        max-width: 42px;
        height: 42px;
        min-height: 42px;
        max-height: 42px;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        overflow: hidden;
        color: transparent;
        font-size: 0;
        line-height: 0;
        background-color: #ffffff;
        background-image: url("../../Images/Flow/Icons/appointment-blue.svg");
        background-repeat: no-repeat;
        background-position: center;
border: 1px solid rgba(15, 53, 73, 0.28);
        border-radius: 999px;
    }
}

/* Pass 10.54: desktop partner list typography and distance/badge alignment. */
@media (min-width: 1280px) {
    #of-home-ctn[data-results-state="ready"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card,
    #of-home-ctn[data-results-state="empty"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card {
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas:
            ". distance badge"
            "name book directions"
            "phone book directions";
    }

    #of-home-ctn[data-results-state="ready"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card__name,
    #of-home-ctn[data-results-state="empty"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card__name,
    #of-home-ctn[data-results-state="ready"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card__phone,
    #of-home-ctn[data-results-state="empty"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card__phone {
        font-size: 14px;
        line-height: 18px;
    }

    #of-home-ctn[data-results-state="ready"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card__distance,
    #of-home-ctn[data-results-state="empty"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card__distance {
        grid-area: distance;
        justify-self: end;
        align-self: center;
        font-size: 14px;
        line-height: 18px;
    }

    #of-home-ctn[data-results-state="ready"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card__classification,
    #of-home-ctn[data-results-state="empty"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card__classification {
        grid-area: badge;
        justify-self: end;
        align-self: center;
        min-width: 96px;
        max-width: 118px;
        height: 24px;
        min-height: 24px;
        padding: 4px 8px;
        font-size: 12px;
        line-height: 16px;
    }
}

/* Pass 10.56: keep action icons right, but restore breathing room between distance and badge. */
@media (min-width: 1280px) {
    #of-home-ctn[data-results-state="ready"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card,
    #of-home-ctn[data-results-state="empty"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card {
        grid-template-columns: minmax(0, 1fr) auto 16px 44px 44px;
        grid-template-areas:
            ". distance . badge badge"
            "name . . book directions"
            "phone . . book directions";
        column-gap: 8px;
    }

    #of-home-ctn[data-results-state="ready"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card button.of-results-partner-card__select,
    #of-home-ctn[data-results-state="empty"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card button.of-results-partner-card__select,
    #of-home-ctn[data-results-state="ready"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card button.of-results-partner-card__directions,
    #of-home-ctn[data-results-state="empty"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card button.of-results-partner-card__directions {
        align-self: center;
        justify-self: end;
    }

    #of-home-ctn[data-results-state="ready"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card__distance,
    #of-home-ctn[data-results-state="empty"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card__distance {
        justify-self: end;
    }

    #of-home-ctn[data-results-state="ready"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card__classification,
    #of-home-ctn[data-results-state="empty"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card__classification {
        justify-self: end;
    }
}

/* Pass 10.57: desktop partner card spacing refinement.
   Name/phone use the full left area up to the action icons; distance stays close to the classification badge without touching it. */
@media (min-width: 1280px) {
    #of-home-ctn[data-results-state="ready"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card,
    #of-home-ctn[data-results-state="empty"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card {
        grid-template-columns: minmax(0, 1fr) auto 4px 44px 44px;
        grid-template-areas:
            ". distance . badge badge"
            "name name name book directions"
            "phone phone phone book directions";
    }
}


/* Pass 10.71: when a service cannot be booked, the list card no longer reserves the booking-icon column. */
@media (min-width: 1280px) {
    #of-home-ctn[data-results-state="ready"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card:not(:has(.of-results-partner-card__select)),
    #of-home-ctn[data-results-state="empty"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card:not(:has(.of-results-partner-card__select)) {
        grid-template-columns: minmax(0, 1fr) auto 4px auto;
        grid-template-areas:
            ". distance . badge"
            "name name name directions"
            "phone phone phone directions";
    }

    #of-home-ctn[data-results-state="ready"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card:not(:has(.of-results-partner-card__select)) .of-results-partner-card__name,
    #of-home-ctn[data-results-state="empty"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card:not(:has(.of-results-partner-card__select)) .of-results-partner-card__name,
    #of-home-ctn[data-results-state="ready"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card:not(:has(.of-results-partner-card__select)) .of-results-partner-card__phone,
    #of-home-ctn[data-results-state="empty"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card:not(:has(.of-results-partner-card__select)) .of-results-partner-card__phone {
        min-width: 0;
        max-width: 100%;
    }

    #of-home-ctn[data-results-state="ready"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card:not(:has(.of-results-partner-card__select)) .of-results-partner-card__directions,
    #of-home-ctn[data-results-state="empty"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card:not(:has(.of-results-partner-card__select)) .of-results-partner-card__directions {
        grid-area: directions;
        justify-self: end;
    }

    #of-home-ctn[data-results-state="ready"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card:not(:has(.of-results-partner-card__select)) .of-results-partner-card__classification,
    #of-home-ctn[data-results-state="empty"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card:not(:has(.of-results-partner-card__select)) .of-results-partner-card__classification {
        grid-area: badge;
        justify-self: end;
    }

    #of-home-ctn[data-results-state="ready"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card:not(:has(.of-results-partner-card__select)) .of-results-partner-card__distance,
    #of-home-ctn[data-results-state="empty"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card:not(:has(.of-results-partner-card__select)) .of-results-partner-card__distance {
        grid-area: distance;
        justify-self: end;
    }
}


/* Pass 10.72: non-bookable result cards — keep the badge wider without forcing the directions column wider.
   This lets the office name/phone stretch up to the directions icon. */
@media (min-width: 1280px) {
    #of-home-ctn[data-results-state="ready"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card:not(:has(.of-results-partner-card__select)),
    #of-home-ctn[data-results-state="empty"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card:not(:has(.of-results-partner-card__select)) {
        grid-template-columns: minmax(0, 1fr) auto 4px 44px;
        grid-template-areas:
            ". distance badge badge"
            "name name name directions"
            "phone phone phone directions";
    }

    #of-home-ctn[data-results-state="ready"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card:not(:has(.of-results-partner-card__select)) .of-results-partner-card__name,
    #of-home-ctn[data-results-state="empty"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card:not(:has(.of-results-partner-card__select)) .of-results-partner-card__name,
    #of-home-ctn[data-results-state="ready"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card:not(:has(.of-results-partner-card__select)) .of-results-partner-card__phone,
    #of-home-ctn[data-results-state="empty"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card:not(:has(.of-results-partner-card__select)) .of-results-partner-card__phone {
        justify-self: stretch;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
}


/* Pass 10.73: non-bookable cards keep distance/badge positions identical to bookable cards,
   while the office name uses the freed booking-column space. */
@media (min-width: 1280px) {
    #of-home-ctn[data-results-state="ready"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card:not(:has(.of-results-partner-card__select)),
    #of-home-ctn[data-results-state="empty"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card:not(:has(.of-results-partner-card__select)) {
        grid-template-columns: minmax(0, 1fr) auto 4px 44px 44px;
        grid-template-areas:
            ". distance . badge badge"
            "name name name name directions"
            "phone phone phone phone directions";
    }

    #of-home-ctn[data-results-state="ready"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card:not(:has(.of-results-partner-card__select)) .of-results-partner-card__distance,
    #of-home-ctn[data-results-state="empty"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card:not(:has(.of-results-partner-card__select)) .of-results-partner-card__distance {
        grid-area: distance;
        justify-self: end;
    }

    #of-home-ctn[data-results-state="ready"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card:not(:has(.of-results-partner-card__select)) .of-results-partner-card__classification,
    #of-home-ctn[data-results-state="empty"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card:not(:has(.of-results-partner-card__select)) .of-results-partner-card__classification {
        grid-area: badge;
        justify-self: end;
    }

    #of-home-ctn[data-results-state="ready"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card:not(:has(.of-results-partner-card__select)) .of-results-partner-card__name,
    #of-home-ctn[data-results-state="empty"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card:not(:has(.of-results-partner-card__select)) .of-results-partner-card__name,
    #of-home-ctn[data-results-state="ready"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card:not(:has(.of-results-partner-card__select)) .of-results-partner-card__phone,
    #of-home-ctn[data-results-state="empty"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card:not(:has(.of-results-partner-card__select)) .of-results-partner-card__phone {
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }
}


/* Pass 10.74: map/list hover link.
   When hovering a map marker, the matching list card is visually highlighted. */
@media (min-width: 1280px) {
    #of-home-ctn[data-results-state="ready"] .of-results-partner-card--map-highlighted,
    #of-home-ctn[data-results-state="empty"] .of-results-partner-card--map-highlighted,
    #of-home-ctn[data-results-state="ready"] .of-results-desktop-list-view .of-results-partner-card--map-highlighted,
    #of-home-ctn[data-results-state="empty"] .of-results-desktop-list-view .of-results-partner-card--map-highlighted {
        border-color: var(--ayvens-theme-brand-secondary-400, #0f3549);
        box-shadow: 0 0 0 1px rgba(15, 53, 73, 0.16), 0 10px 24px rgba(15, 53, 73, 0.14);
        transform: none;
    }
}


/* Client review: phone values appear without Tel. prefix in all breakpoints. */
.of-results-partner-card__phone::before {
    content: "";
}

/* Pass 11.4: phone number aligns with the office name after removing the visible "Tel." prefix. */
@media (min-width: 1280px) {
    #of-home-ctn[data-results-state="ready"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card__phone,
    #of-home-ctn[data-results-state="empty"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card__phone {
        padding-left: 0;
    }
}

/* Pass 11.5: remove the invisible phone prefix spacing so the phone aligns exactly with the office name. */
.of-results-partner-card__phone::before {
    content: none;
    display: none;
    width: 0;
    margin: 0;
    padding: 0;
}

@media (min-width: 1280px) {
    #of-home-ctn[data-results-state="ready"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card__phone,
    #of-home-ctn[data-results-state="empty"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card__phone {
        justify-content: flex-start;
        text-align: left;
        padding-left: 0;
        margin-left: 0;
        text-indent: 0;
    }
}

/* Pass 11.17: mobile/tablet results card readability boost. */
@media (max-width: 739px) {
    .of-results-partners-list {
        height: 144px;
        min-height: 144px;
        max-height: 144px;
    }

    .of-results-partner-card {
        height: 144px;
        min-height: 144px;
        gap: 7px;
    }

    .of-results-partner-card__name {
        font-size: 14px;
        line-height: 18px;
        font-weight: 600;
    }

    .of-results-partner-card__classification {
        min-width: 84px;
        height: 20px;
        min-height: 20px;
        padding: 2px 8px;
        font-size: 11px;
        line-height: 14px;
    }

    .of-results-partner-card__meta,
    .of-results-partner-card__distance {
        font-size: 13px;
        line-height: 18px;
    }

    .of-results-partner-card__distance {
        font-weight: 600;
    }

    .of-results-partner-card__select {
        font-size: 12px;
        line-height: 14px;
    }
}

@media (min-width: 740px) and (max-width: 1199px) {
    .of-results-partner-card__name {
        font-size: 15px;
        line-height: 20px;
    }

    .of-results-partner-card__classification {
        font-size: 11px;
        line-height: 14px;
    }

    .of-results-partner-card__meta,
    .of-results-partner-card__distance,
    .of-results-partner-card__phone {
        font-size: 14px;
        line-height: 19px;
    }

    .of-results-partner-card__select {
        font-size: 13px;
        line-height: 16px;
    }
}


/* Pass 11.70: mobile result cards closer to ayvens.com carousel cue.
   Wider cards, more legible type and visible part of the second card. */
@media (max-width: 479px) {
    .of-home__results-partners {
        bottom: 20px;
        height: 158px;
        min-height: 158px;
    }

    .of-results-partners-list {
        gap: 12px;
        height: 158px;
        min-height: 158px;
        padding-left: 18px;
        padding-right: 18px;
        scroll-padding-left: 18px;
    }

    .of-results-partner-card {
        flex: 0 0 clamp(224px, 64vw, 252px);
        width: clamp(224px, 64vw, 252px);
        min-width: clamp(224px, 64vw, 252px);
        height: 154px;
        min-height: 154px;
        padding: 30px 14px 54px 16px;
        scroll-snap-align: start;
    }

    .of-results-partner-card__name {
        font-size: 14px;
        font-weight: 600;
        line-height: 18px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .of-results-partner-card__classification {
        top: 8px;
        right: 8px;
        min-width: 82px;
        height: 20px;
        min-height: 20px;
        padding: 2px 7px;
        font-size: 10px;
        font-weight: 500;
        line-height: 12px;
        border-radius: 3px;
    }

    .of-results-partner-card__meta {
        margin-top: 8px;
        font-size: 13px;
        line-height: 18px;
    }

    .of-results-partner-card__distance {
        min-height: 22px;
        font-size: 13px;
        font-weight: 500;
        line-height: 18px;
    }

    .of-results-partner-card__distance::before {
        width: 18px;
        height: 18px;
        margin-right: 4px;
    }

    .of-results-partner-card__select {
        right: 14px;
        bottom: 10px;
        left: 14px;
        min-height: 32px;
        padding: 7px 12px;
        font-size: 12px;
        font-weight: 500;
        line-height: 14px;
    }
}

/* Pass 11.71: mobile cards readability and internal spacing.
   Make the cards more legible without letting the distance touch the CTA. */
@media (max-width: 479px) {
    .of-home__results-partners {
        bottom: 18px;
        height: 164px;
        min-height: 164px;
    }

    .of-results-partners-list {
        height: 164px;
        min-height: 164px;
        padding-left: 18px;
        padding-right: 18px;
        gap: 12px;
    }

    .of-results-partner-card {
        flex-basis: clamp(232px, 66vw, 258px);
        width: clamp(232px, 66vw, 258px);
        min-width: clamp(232px, 66vw, 258px);
        height: 160px;
        min-height: 160px;
        padding: 31px 14px 58px 16px;
    }

    .of-results-partner-card__name {
        font-size: 15px;
        font-weight: 600;
        line-height: 19px;
        letter-spacing: 0.1px;
    }

    .of-results-partner-card__classification {
        top: 8px;
        right: 8px;
        min-width: 84px;
        height: 20px;
        min-height: 20px;
        font-size: 10.5px;
        line-height: 13px;
    }

    .of-results-partner-card__meta {
        margin-top: 10px;
        margin-bottom: 8px;
        font-size: 13.5px;
        line-height: 18px;
    }

    .of-results-partner-card__distance {
        min-height: 24px;
        font-size: 13.5px;
        font-weight: 500;
        line-height: 18px;
    }

    .of-results-partner-card__select {
        right: 14px;
        bottom: 10px;
        left: 14px;
        min-height: 34px;
        padding-top: 8px;
        padding-bottom: 8px;
        font-size: 12.5px;
        font-weight: 500;
        line-height: 15px;
    }
}

/* Pass 11.72: mobile partner card balance.
   Fixed internal rails keep the badge, name, distance and CTA stable for one- or two-line names. */
@media (max-width: 479px) {
    .of-home__results-partners {
        bottom: 18px;
        height: 164px;
        min-height: 164px;
    }

    .of-results-partners-list {
        height: 164px;
        min-height: 164px;
        padding-left: 18px;
        padding-right: 18px;
        gap: 12px;
    }

    .of-results-partner-card {
        flex-basis: clamp(232px, 66vw, 258px);
        width: clamp(232px, 66vw, 258px);
        min-width: clamp(232px, 66vw, 258px);
        height: 160px;
        min-height: 160px;
        padding: 0;
        box-shadow: 0 3px 9px rgba(15, 53, 73, 0.08);
        overflow: hidden;
    }

    .of-results-partner-card:hover,
    .of-results-partner-card:focus-visible,
    .of-results-partner-card--map-hover,
    .of-results-partner-card--selected {
        box-shadow: 0 4px 11px rgba(15, 53, 73, 0.10);
    }

    .of-results-partner-card__classification {
        top: 8px;
        right: 10px;
        min-width: 84px;
        height: 20px;
        min-height: 20px;
        padding: 2px 7px;
        font-size: 10.5px;
        line-height: 13px;
        border-radius: 3px;
    }

    .of-results-partner-card__name {
        position: absolute;
        top: 37px;
        left: 16px;
        right: 14px;
        max-height: 40px;
        color: var(--ayvens-theme-brand-secondary-400, #0f3549);
        font-size: 15px;
        font-weight: 600;
        line-height: 19px;
        letter-spacing: 0.1px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        overflow-wrap: normal;
        word-break: normal;
    }

    .of-results-partner-card__meta {
        position: absolute;
        top: 91px;
        left: 16px;
        right: 14px;
        display: block;
        min-height: 24px;
        margin: 0;
        font-size: 13.5px;
        line-height: 18px;
    }

    .of-results-partner-card__distance {
        display: inline-flex;
        align-items: center;
        min-height: 24px;
        padding: 0;
        font-size: 13.5px;
        font-weight: 500;
        line-height: 18px;
        white-space: nowrap;
    }

    .of-results-partner-card__distance::before {
        width: 18px;
        height: 18px;
        margin-right: 4px;
    }

    .of-results-partner-card__select {
        right: 14px;
        bottom: 10px;
        left: 14px;
        width: auto;
        min-height: 34px;
        padding: 8px 12px;
        font-size: 12.5px;
        font-weight: 500;
        line-height: 15px;
    }
}


/* Pass 11.73: mobile partner card balance.
   Keep distance fixed and away from the select CTA while preserving room for one/two-line names. */
@media (max-width: 479px) {
    .of-results-partner-card {
        padding-top: 34px;
        padding-bottom: 54px;
        box-shadow: 0 3px 10px rgba(15, 53, 73, 0.08);
    }

    .of-results-partner-card:hover,
    .of-results-partner-card:focus-visible,
    .of-results-partner-card--map-hover {
        box-shadow: 0 4px 12px rgba(15, 53, 73, 0.10);
        transform: none;
    }

    .of-results-partner-card--selected {
        box-shadow: 0 0 0 1px rgba(15, 53, 73, 0.14), 0 4px 12px rgba(15, 53, 73, 0.10);
    }

    .of-results-partner-card__name {
        display: -webkit-box;
        min-height: 38px;
        max-height: 38px;
        margin-top: 0;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .of-results-partner-card__meta {
        margin-top: 0;
    }

    .of-results-partner-card__distance {
        position: absolute;
        left: 16px;
        right: 12px;
        bottom: 48px;
        width: auto;
        min-height: 24px;
        margin: 0;
    }

    .of-results-partner-card__select {
        bottom: 8px;
    }
}

/* Pass 11.74: mobile partner card final balance.
   Distance is fixed above the CTA, never overlapping one/two-line names. */
@media (max-width: 479px) {
    .of-results-partner-card {
        position: relative;
        height: 160px;
        min-height: 160px;
        padding: 0;
        box-shadow: 0 2px 7px rgba(15, 53, 73, 0.06);
        overflow: hidden;
    }

    .of-results-partner-card:hover,
    .of-results-partner-card:focus-visible,
    .of-results-partner-card--map-hover {
        box-shadow: 0 3px 8px rgba(15, 53, 73, 0.08);
        transform: none;
    }

    .of-results-partner-card--selected {
        box-shadow: 0 0 0 1px rgba(15, 53, 73, 0.14), 0 3px 8px rgba(15, 53, 73, 0.08);
    }

    .of-results-partner-card__classification {
        position: absolute;
        top: 8px;
        right: 10px;
    }

    .of-results-partner-card__name {
        position: absolute;
        top: 40px;
        left: 16px;
        right: 14px;
        min-height: 38px;
        max-height: 38px;
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .of-results-partner-card__meta {
        position: static;
        display: contents;
        min-height: 0;
        margin: 0;
    }

    .of-results-partner-card__distance {
        position: absolute;
        top: 88px;
        bottom: auto;
        left: 16px;
        right: 14px;
        width: auto;
        min-height: 24px;
        margin: 0;
        display: inline-flex;
        align-items: center;
    }

    .of-results-partner-card__select {
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 8px;
        width: auto;
    }
}

/* Pass 11.75: mobile card distance alignment.
   Align distance with the card text/button rail and keep it clearly above the CTA. */
@media (max-width: 479px) {
    #of-home-ctn[data-results-state="ready"] .of-results-partners-list .of-results-partner-card,
    #of-home-ctn[data-results-state="empty"] .of-results-partners-list .of-results-partner-card {
        box-shadow: 0 2px 7px rgba(15, 53, 73, 0.055);
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partners-list .of-results-partner-card:hover,
    #of-home-ctn[data-results-state="ready"] .of-results-partners-list .of-results-partner-card:focus-visible,
    #of-home-ctn[data-results-state="ready"] .of-results-partners-list .of-results-partner-card--map-hover,
    #of-home-ctn[data-results-state="empty"] .of-results-partners-list .of-results-partner-card:hover,
    #of-home-ctn[data-results-state="empty"] .of-results-partners-list .of-results-partner-card:focus-visible,
    #of-home-ctn[data-results-state="empty"] .of-results-partners-list .of-results-partner-card--map-hover {
        box-shadow: 0 3px 8px rgba(15, 53, 73, 0.07);
        transform: none;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partners-list .of-results-partner-card__name,
    #of-home-ctn[data-results-state="empty"] .of-results-partners-list .of-results-partner-card__name {
        left: 16px;
        right: 16px;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partners-list .of-results-partner-card__distance,
    #of-home-ctn[data-results-state="empty"] .of-results-partners-list .of-results-partner-card__distance {
        position: absolute;
        top: 82px;
        bottom: auto;
        left: 16px;
        right: 16px;
        width: auto;
        min-height: 24px;
        margin: 0;
        display: inline-flex;
        align-items: center;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-partners-list .of-results-partner-card__select,
    #of-home-ctn[data-results-state="empty"] .of-results-partners-list .of-results-partner-card__select {
        left: 16px;
        right: 16px;
        bottom: 8px;
        width: auto;
    }
}

/* Pass 11.77: increase mobile office name font in result cards. */
@media (max-width: 479px) {
    #of-home-ctn[data-results-state="ready"] .of-results-partners-list .of-results-partner-card__name,
    #of-home-ctn[data-results-state="empty"] .of-results-partners-list .of-results-partner-card__name {
        font-size: 18px;
        line-height: 20px;
        min-height: 40px;
        max-height: 40px;
    }
}

/* 20260617 pass72: restore touch/tablet result company-card badge layout.
   Keep the validated horizontal rail and CTAs, but put the classification badge back on the
   right side of the office card and keep the distance/name content on the left. */
@media (min-width: 480px) and (max-width: 1279px) {
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto minmax(0, 1fr) auto !important;
        grid-template-areas:
            ". badge"
            "name name"
            "distance distance"
            ". book" !important;
        align-items: start !important;
        column-gap: 8px !important;
        row-gap: 5px !important;
        position: relative !important;
        box-sizing: border-box !important;
    }

    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__main,
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__header,
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__meta {
        display: contents !important;
    }

    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__classification {
        grid-area: badge !important;
        position: static !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        justify-self: end !important;
        align-self: start !important;
        z-index: 2 !important;
        width: auto !important;
        min-width: 86px !important;
        max-width: 112px !important;
        height: 22px !important;
        min-height: 22px !important;
        padding: 4px 8px !important;
        font-size: 10px !important;
        font-weight: 500 !important;
        line-height: 14px !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        border-radius: 3px !important;
    }

    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__name {
        grid-area: name !important;
        justify-self: stretch !important;
        align-self: start !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__distance {
        grid-area: distance !important;
        justify-self: start !important;
        align-self: start !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: nowrap !important;
    }

    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__select {
        grid-area: book !important;
        justify-self: end !important;
        align-self: end !important;
    }
}

@media (max-width: 479px) {
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card {
        position: relative !important;
    }

    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__classification {
        position: absolute !important;
        top: 8px !important;
        right: 10px !important;
        left: auto !important;
        justify-self: auto !important;
        align-self: auto !important;
        z-index: 2 !important;
    }
}

/* 20260617 pass73: stabilise tablet/touch result-card internals.
   Badge stays on the top right; distance keeps a fixed vertical position above the Choose CTA
   so one-line and two-line workshop names do not move the lower card content. */
@media (min-width: 480px) and (max-width: 1279px) {
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card {
        display: block !important;
        position: relative !important;
        height: 138px !important;
        min-height: 138px !important;
        max-height: 138px !important;
        padding: 36px 14px 54px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__main,
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__header,
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__meta {
        display: block !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__classification {
        position: absolute !important;
        top: 10px !important;
        right: 12px !important;
        left: auto !important;
        z-index: 2 !important;
        display: inline-flex !important;
        width: auto !important;
        min-width: 86px !important;
        max-width: 112px !important;
        height: 22px !important;
        min-height: 22px !important;
        padding: 4px 8px !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 10px !important;
        font-weight: 500 !important;
        line-height: 14px !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        border-radius: 3px !important;
    }

    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__name {
        display: -webkit-box !important;
        width: calc(100% - 6px) !important;
        max-width: calc(100% - 6px) !important;
        min-width: 0 !important;
        max-height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        white-space: normal !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }

    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__distance {
        position: absolute !important;
        left: 14px !important;
        right: auto !important;
        bottom: 43px !important;
        display: inline-flex !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 28px) !important;
        min-height: 20px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--ayvens-theme-brand-secondary-400, #0f3549) !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        line-height: 16px !important;
        white-space: nowrap !important;
    }

    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__distance::before {
        width: 18px !important;
        height: 18px !important;
        margin-right: 3px !important;
    }

    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__select {
        position: absolute !important;
        right: 14px !important;
        bottom: 12px !important;
        left: auto !important;
        display: inline-flex !important;
        width: auto !important;
        min-width: 110px !important;
        min-height: 28px !important;
        margin: 0 !important;
        padding: 5px 11px !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 11px !important;
        font-weight: 500 !important;
        line-height: 13px !important;
        box-sizing: border-box !important;
    }
}

/* 20260617 pass74: fix touch/tablet result-card lower content spacing.
   Keep the badge at the top right and keep the Choose CTA validated, but move the
   distance line to a stable band clearly above the CTA. This avoids overlap when
   workshop names wrap to two lines and keeps portrait/landscape cards consistent. */
@media (min-width: 480px) and (max-width: 1279px) {
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card {
        height: 138px !important;
        min-height: 138px !important;
        max-height: 138px !important;
        padding: 36px 14px 56px !important;
    }

    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__name {
        max-height: 40px !important;
        line-height: 20px !important;
    }

    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__distance {
        left: 14px !important;
        bottom: 52px !important;
        min-height: 18px !important;
        max-height: 18px !important;
        line-height: 18px !important;
        align-items: center !important;
        z-index: 2 !important;
    }

    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__distance::before {
        flex: 0 0 18px !important;
        width: 18px !important;
        height: 18px !important;
        margin-right: 4px !important;
    }

    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__select {
        right: 14px !important;
        bottom: 12px !important;
        min-height: 30px !important;
        height: 30px !important;
        z-index: 3 !important;
    }
}

/* 20260701 PRD-002: client feedback - visible hover/active states for result-card actions. */
.of-results-partner-card__select,
.of-results-partner-card__directions {
    transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 80ms ease !important;
}

.of-results-partner-card__select:not(:disabled):hover {
    background-color: #163f55 !important;
    border-color: #163f55 !important;
    box-shadow: 0 2px 8px rgba(15, 53, 73, 0.18) !important;
}

.of-results-partner-card__select:not(:disabled):active {
    background-color: #08283a !important;
    border-color: #08283a !important;
    box-shadow: none !important;
    transform: translateY(1px) !important;
}

.of-results-partner-card__directions:not(:disabled):hover {
    background-color: #f4f8fa !important;
    border-color: var(--ayvens-theme-brand-secondary-400, #0f3549) !important;
    box-shadow: 0 2px 8px rgba(15, 53, 73, 0.14) !important;
}

.of-results-partner-card__directions:not(:disabled):active {
    background-color: #eaf1f4 !important;
    border-color: var(--ayvens-theme-brand-secondary-400, #0f3549) !important;
    box-shadow: none !important;
    transform: translateY(1px) !important;
}

@media (min-width: 1280px) {
    #of-home-ctn[data-results-state="ready"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card button.of-results-partner-card__select:not(:disabled):hover,
    #of-home-ctn[data-results-state="empty"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card button.of-results-partner-card__select:not(:disabled):hover {
        background-color: #f4f8fa !important;
        border-color: var(--ayvens-theme-brand-secondary-400, #0f3549) !important;
    }

    #of-home-ctn[data-results-state="ready"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card button.of-results-partner-card__select:not(:disabled):active,
    #of-home-ctn[data-results-state="empty"] #of-results-panel .of-results-desktop-list-view .of-results-partner-card button.of-results-partner-card__select:not(:disabled):active {
        background-color: #eaf1f4 !important;
        border-color: var(--ayvens-theme-brand-secondary-400, #0f3549) !important;
    }
}


/* 20260701 PRD-003: client feedback - force visible hover/active states on Directions buttons. */
body.of-body #of-home-ctn #of-results-panel .of-results-partner-card button.of-results-partner-card__directions:not(:disabled):hover,
body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card button.of-results-partner-card__directions:not(:disabled):hover,
body.of-body #of-home-ctn #of-results-panel .of-results-desktop-list-view .of-results-partner-card button.of-results-partner-card__directions:not(:disabled):hover {
    background-color: #eaf1f4 !important;
    border-color: var(--ayvens-theme-brand-secondary-400, #0f3549) !important;
    box-shadow: 0 2px 8px rgba(15, 53, 73, 0.18) !important;
    transform: translateY(-1px) !important;
}

body.of-body #of-home-ctn #of-results-panel .of-results-partner-card button.of-results-partner-card__directions:not(:disabled):active,
body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card button.of-results-partner-card__directions:not(:disabled):active,
body.of-body #of-home-ctn #of-results-panel .of-results-desktop-list-view .of-results-partner-card button.of-results-partner-card__directions:not(:disabled):active {
    background-color: #dce8ee !important;
    border-color: var(--ayvens-theme-brand-secondary-400, #0f3549) !important;
    box-shadow: none !important;
    transform: translateY(1px) !important;
}


/* 20260701 PRD-004: keep Directions hover/active visually stable, without vertical movement. */
body.of-body #of-home-ctn #of-results-panel .of-results-partner-card button.of-results-partner-card__directions:not(:disabled),
body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card button.of-results-partner-card__directions:not(:disabled),
body.of-body #of-home-ctn #of-results-panel .of-results-desktop-list-view .of-results-partner-card button.of-results-partner-card__directions:not(:disabled) {
    transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease !important;
}

body.of-body #of-home-ctn #of-results-panel .of-results-partner-card button.of-results-partner-card__directions:not(:disabled):hover,
body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card button.of-results-partner-card__directions:not(:disabled):hover,
body.of-body #of-home-ctn #of-results-panel .of-results-desktop-list-view .of-results-partner-card button.of-results-partner-card__directions:not(:disabled):hover,
body.of-body #of-home-ctn #of-results-panel .of-results-partner-card button.of-results-partner-card__directions:not(:disabled):active,
body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card button.of-results-partner-card__directions:not(:disabled):active,
body.of-body #of-home-ctn #of-results-panel .of-results-desktop-list-view .of-results-partner-card button.of-results-partner-card__directions:not(:disabled):active {
    transform: none !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: 24px;
    height: 24px;
    background-color: transparent;
    background-image: url("/Images/Flow/Icons/Icons_chevron-left-bg.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 24px 24px;
    clip-path: none;
}

.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 {
    color: var(--of-flow-brand-color, #0f3549);
    background: #ffdc46;
}

.of-partner-detail__classification.of-classification--green {
    color: #ffffff;
    background: #008282;
}

.of-partner-detail__classification.of-classification--yellow {
    color: #ffffff;
    background: #0f3549;
}

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

.of-partner-detail__classification.of-classification--non-preferential,
.of-partner-detail__classification.of-classification--red,
.of-partner-detail__classification.of-classification--black,
.of-partner-detail__classification.of-classification--brown,
.of-partner-detail__classification.of-classification--cyan,
.of-partner-detail__classification.of-classification--unknown {
    color: var(--of-flow-brand-color, #0f3549);
    background: #9de0e0;
}

.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__info-row--schedule .of-partner-detail__info-value {
    white-space: pre-line;
}

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

.of-partner-detail__info-row--distance .of-partner-detail__info-content {
    gap: 0;
}

.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;
    }
}


/* T6 partner detail: mobile client-feedback refresh. */
@media (max-width: 479.98px) {
    #of-home-ctn[data-current-stage="partner-detail"] {
        min-height: 100dvh;
    }

    .of-partner-detail {
        grid-template-rows: var(--of-flow-header-height, 64px) minmax(0, 1fr) auto;
        min-height: 100dvh;
        height: 100dvh;
        background: var(--of-flow-page-bg, #f6f6f6);
    }

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

    .of-partner-detail__title {
        font-size: var(--of-flow-mobile-header-title-size, 16px);
        line-height: var(--of-flow-mobile-header-title-line-height, 20px);
        letter-spacing: var(--of-flow-mobile-header-title-letter-spacing, 0.2px);
    }

    .of-partner-detail__back,
    .of-partner-detail__header-spacer {
        width: 30px;
        height: 30px;
    }

    .of-partner-detail__back-icon {
        width: 16px;
        height: 22px;
    }

    .of-partner-detail__body {
        display: block;
        min-height: 0;
        padding: 16px 24px 20px;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

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

    .of-partner-detail__card {
        position: relative;
        display: grid;
        gap: 18px;
        width: min(100%, 306px);
        margin: 0 auto;
        padding: 50px 20px 22px;
        background: #ffffff;
        border: 0;
        border-radius: 5px;
        box-shadow: none;
        box-sizing: border-box;
    }

    .of-partner-detail__classification {
        position: absolute;
        top: 12px;
        right: 12px;
        justify-self: auto;
        max-width: 150px;
        min-height: 24px;
        margin: 0;
        padding: 3px 8px;
        font-size: 13px;
        font-weight: 600;
        line-height: 18px;
        letter-spacing: 0.15px;
        border-radius: 2px;
        white-space: nowrap;
    }

    .of-partner-detail__heading,
    .of-partner-detail__heading-main {
        display: grid;
        gap: 0;
        min-width: 0;
        margin: 0;
        padding: 0;
    }

    .of-partner-detail__name {
        font-size: 20px;
        font-weight: 600;
        line-height: 25px;
        letter-spacing: 0.35px;
        overflow-wrap: anywhere;
    }

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

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

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

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

    .of-partner-detail__info-icon {
        width: 20px;
        height: 20px;
        justify-self: center;
        margin-top: 2px;
        object-fit: contain;
    }

    .of-partner-detail__info-row--distance .of-partner-detail__info-icon,
    .of-partner-detail__info-row--phone .of-partner-detail__info-icon,
    .of-partner-detail__info-row--schedule .of-partner-detail__info-icon {
        width: 24px;
        height: 24px;
        margin-top: 0;
    }

    .of-partner-detail__info-row--address .of-partner-detail__info-icon {
        width: 20px;
        height: 20px;
        margin-top: 2px;
    }

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

    .of-partner-detail__info-label {
        color: #7b8d99;
        font-size: 14px;
        font-weight: 500;
        line-height: 18px;
        letter-spacing: 0.2px;
    }

    .of-partner-detail__info-value {
        color: var(--of-flow-brand-color, #0f3549);
        font-size: 14px;
        font-weight: 500;
        line-height: 19px;
        letter-spacing: 0.15px;
        overflow-wrap: anywhere;
    }

    .of-partner-detail__info-row--distance {
        align-items: start;
    }


    .of-partner-detail__info-row--distance .of-partner-detail__info-content {
        gap: 2px;
    }

    .of-partner-detail__info-row--distance .of-partner-detail__info-value {
        line-height: 19px;
    }

    .of-partner-detail__actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: min(100%, 306px);
        margin: 16px auto 0;
        padding: 0;
        background: transparent;
    }

    .of-partner-detail__action {
        min-height: 50px;
        padding: 12px 18px;
        gap: 8px;
        font-size: 16px;
        font-weight: 600;
        line-height: 20px;
        letter-spacing: 0.2px;
        border-radius: 999px;
    }

    .of-partner-detail__action-icon {
        width: 22px;
        height: 22px;
        flex: 0 0 22px;
    }

    .of-partner-detail__action--primary,
    .of-partner-detail__action--secondary {
        flex: 1 1 0;
        min-width: 0;
    }

    .of-partner-detail__footer {
        min-height: var(--of-flow-footer-height, 52px);
        padding: 9px 12px;
        font-size: 11px;
        line-height: 13px;
        letter-spacing: 0.15px;
    }
}

@media (max-width: 360px) {
    .of-partner-detail__body {
        padding-left: 22px;
        padding-right: 22px;
    }

    .of-partner-detail__card,
    .of-partner-detail__actions {
        width: min(100%, 296px);
    }

    .of-partner-detail__card {
        padding-left: 18px;
        padding-right: 18px;
    }

    .of-partner-detail__action {
        min-height: 48px;
        padding-left: 14px;
        padding-right: 14px;
        font-size: 15px;
    }
}


/* Pass 10.35: desktop T5 partner detail as contextual map bubble only.
   T5 stays active; the full partner-detail screen remains reserved for narrower layouts. */
.of-partner-detail__close {
    display: none;
}

@media (min-width: 1280px) {
    #of-home-ctn[data-current-stage="search"][data-results-state="ready"] > .of-partner-detail,
    #of-home-ctn[data-current-stage="search"][data-results-state="empty"] > .of-partner-detail {
        position: absolute !important;
        top: calc(var(--of-responsive-shell-header-height, 64px) + 20px) !important;
        left: 384px !important;
        z-index: 28 !important;
        display: grid !important;
        grid-template-rows: minmax(0, 1fr) !important;
        width: 326px !important;
        max-width: 326px !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: calc(100dvh - var(--of-responsive-shell-header-height, 64px) - var(--of-responsive-shell-footer-height, 32px) - 40px) !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--of-flow-brand-color, #0f3549) !important;
        background: #ffffff !important;
        border-radius: 6px !important;
        box-shadow: 0 16px 38px rgba(15, 53, 73, 0.20) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    #of-home-ctn[data-current-stage="search"][data-results-state="ready"] > .of-partner-detail[hidden],
    #of-home-ctn[data-current-stage="search"][data-results-state="empty"] > .of-partner-detail[hidden] {
        display: none !important;
    }

    #of-home-ctn[data-current-stage="search"] > .of-partner-detail .of-partner-detail__header,
    #of-home-ctn[data-current-stage="search"] > .of-partner-detail .of-partner-detail__footer,
    #of-home-ctn[data-current-stage="search"] > .of-partner-detail .of-wireframe-title,
    #of-home-ctn[data-current-stage="search"] > .of-partner-detail .of-partner-detail__service {
        display: none !important;
    }

    #of-home-ctn[data-current-stage="search"] > .of-partner-detail .of-partner-detail__body {
        display: grid !important;
        min-height: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    #of-home-ctn[data-current-stage="search"] > .of-partner-detail .of-partner-detail__card {
        position: relative !important;
        display: grid !important;
        gap: 16px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 48px 18px 18px !important;
        background: #ffffff !important;
        border: 0 !important;
        border-radius: 6px 6px 0 0 !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    #of-home-ctn[data-current-stage="search"] > .of-partner-detail .of-partner-detail__close {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        z-index: 2 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 28px !important;
        height: 28px !important;
        padding: 0 !important;
        color: var(--of-flow-brand-color, #0f3549) !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 999px !important;
        cursor: pointer !important;
    }

    #of-home-ctn[data-current-stage="search"] > .of-partner-detail .of-partner-detail__close span,
    #of-home-ctn[data-current-stage="search"] > .of-partner-detail .of-partner-detail__close::before,
    #of-home-ctn[data-current-stage="search"] > .of-partner-detail .of-partner-detail__close::after {
        content: "" !important;
        position: absolute !important;
        display: block !important;
        width: 16px !important;
        height: 2px !important;
        background: currentColor !important;
        border-radius: 2px !important;
    }

    #of-home-ctn[data-current-stage="search"] > .of-partner-detail .of-partner-detail__close span {
        display: none !important;
    }

    #of-home-ctn[data-current-stage="search"] > .of-partner-detail .of-partner-detail__close::before {
        transform: rotate(45deg) !important;
    }

    #of-home-ctn[data-current-stage="search"] > .of-partner-detail .of-partner-detail__close::after {
        transform: rotate(-45deg) !important;
    }

    #of-home-ctn[data-current-stage="search"] > .of-partner-detail .of-partner-detail__classification {
        position: absolute !important;
        top: 14px !important;
        right: 48px !important;
        max-width: 150px !important;
        min-height: 24px !important;
        margin: 0 !important;
        padding: 3px 8px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 18px !important;
        border-radius: 2px !important;
        white-space: nowrap !important;
    }

    #of-home-ctn[data-current-stage="search"] > .of-partner-detail .of-partner-detail__heading,
    #of-home-ctn[data-current-stage="search"] > .of-partner-detail .of-partner-detail__heading-main {
        display: grid !important;
        gap: 0 !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #of-home-ctn[data-current-stage="search"] > .of-partner-detail .of-partner-detail__name {
        font-size: 19px !important;
        font-weight: 600 !important;
        line-height: 24px !important;
        letter-spacing: 0.25px !important;
    }

    #of-home-ctn[data-current-stage="search"] > .of-partner-detail .of-partner-detail__info-list {
        display: grid !important;
        gap: 12px !important;
    }

    #of-home-ctn[data-current-stage="search"] > .of-partner-detail .of-partner-detail__info-row {
        display: grid !important;
        grid-template-columns: 24px minmax(0, 1fr) !important;
        gap: 10px !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-home-ctn[data-current-stage="search"] > .of-partner-detail .of-partner-detail__info-row[hidden] {
        display: none !important;
    }

    #of-home-ctn[data-current-stage="search"] > .of-partner-detail .of-partner-detail__info-icon {
        width: 21px !important;
        height: 21px !important;
        margin-top: 1px !important;
        object-fit: contain !important;
    }

    #of-home-ctn[data-current-stage="search"] > .of-partner-detail .of-partner-detail__info-row--distance .of-partner-detail__info-icon,
    #of-home-ctn[data-current-stage="search"] > .of-partner-detail .of-partner-detail__info-row--phone .of-partner-detail__info-icon {
        width: 22px !important;
        height: 22px !important;
        margin-top: 0 !important;
    }

    #of-home-ctn[data-current-stage="search"] > .of-partner-detail .of-partner-detail__info-row--address .of-partner-detail__info-icon {
        width: 18px !important;
        height: 18px !important;
        margin-top: 2px !important;
    }

    #of-home-ctn[data-current-stage="search"] > .of-partner-detail .of-partner-detail__info-row--schedule .of-partner-detail__info-icon {
        width: 20px !important;
        height: 20px !important;
        margin-top: 1px !important;
    }

    #of-home-ctn[data-current-stage="search"] > .of-partner-detail .of-partner-detail__info-content {
        gap: 1px !important;
    }

    #of-home-ctn[data-current-stage="search"] > .of-partner-detail .of-partner-detail__info-label {
        font-size: 12px !important;
        font-weight: 500 !important;
        line-height: 16px !important;
        letter-spacing: 0.15px !important;
    }

    #of-home-ctn[data-current-stage="search"] > .of-partner-detail .of-partner-detail__info-value {
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 18px !important;
        letter-spacing: 0.1px !important;
    }

    #of-home-ctn[data-current-stage="search"] > .of-partner-detail .of-partner-detail__actions {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 18px 18px !important;
        background: #ffffff !important;
        box-sizing: border-box !important;
    }

    #of-home-ctn[data-current-stage="search"] > .of-partner-detail .of-partner-detail__action {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        min-height: 38px !important;
        padding: 8px 12px !important;
        gap: 6px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 18px !important;
        border-radius: 999px !important;
    }

    #of-home-ctn[data-current-stage="search"] > .of-partner-detail .of-partner-detail__action-icon {
        width: 18px !important;
        height: 18px !important;
        flex: 0 0 18px !important;
    }
}

@media (min-width: 1600px) {
    #of-home-ctn[data-current-stage="search"][data-results-state="ready"] > .of-partner-detail,
    #of-home-ctn[data-current-stage="search"][data-results-state="empty"] > .of-partner-detail {
        left: 408px !important;
    }
}


/* Pass 10.83: detail action buttons should only use text + icon width on mobile/tablet. */
@media (max-width: 1279px) {
    .of-partner-detail__actions {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        width: auto !important;
        max-width: 100% !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .of-partner-detail__action,
    .of-partner-detail__action--primary,
    .of-partner-detail__action--secondary {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        padding-right: 18px !important;
        padding-left: 18px !important;
        white-space: nowrap !important;
    }
}


/* Pass 10.84: tablet detail follows the validated mobile detail layout and keeps footer at the bottom. */
@media (min-width: 480px) and (max-width: 1279px) {
    #of-home-ctn[data-current-stage="partner-detail"] {
        min-height: 100dvh !important;
    }

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

    .of-partner-detail__header {
        display: grid !important;
        grid-template-columns: 32px minmax(0, 1fr) 32px !important;
        min-height: var(--of-flow-header-height, 64px) !important;
        padding: 0 20px !important;
        background: #ffffff !important;
        box-sizing: border-box !important;
    }

    .of-partner-detail__title {
        font-size: var(--of-flow-mobile-header-title-size, 16px) !important;
        line-height: var(--of-flow-mobile-header-title-line-height, 20px) !important;
        letter-spacing: var(--of-flow-mobile-header-title-letter-spacing, 0.2px) !important;
    }

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

    .of-partner-detail__back-icon {
        width: 16px !important;
        height: 22px !important;
    }

    .of-partner-detail__body {
        display: block !important;
        min-height: 0 !important;
        padding: 16px 24px 20px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    .of-partner-detail__body::-webkit-scrollbar {
        display: none !important;
    }

    .of-partner-detail__card {
        position: relative !important;
        display: grid !important;
        gap: 18px !important;
        width: min(100%, 306px) !important;
        margin: 0 auto !important;
        padding: 50px 20px 22px !important;
        background: #ffffff !important;
        border: 0 !important;
        border-radius: 5px !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    .of-partner-detail__classification {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        justify-self: auto !important;
        max-width: 150px !important;
        min-height: 24px !important;
        margin: 0 !important;
        padding: 3px 8px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 18px !important;
        letter-spacing: 0.15px !important;
        border-radius: 2px !important;
        white-space: nowrap !important;
    }

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

    .of-partner-detail__name {
        font-size: 20px !important;
        font-weight: 600 !important;
        line-height: 25px !important;
        letter-spacing: 0.35px !important;
        overflow-wrap: anywhere !important;
    }

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

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

    .of-partner-detail__info-row {
        display: grid !important;
        grid-template-columns: 28px minmax(0, 1fr) !important;
        gap: 10px !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-row[hidden] {
        display: none !important;
    }

    .of-partner-detail__info-icon {
        width: 20px !important;
        height: 20px !important;
        justify-self: center !important;
        margin-top: 2px !important;
        object-fit: contain !important;
    }

    .of-partner-detail__info-row--distance .of-partner-detail__info-icon,
    .of-partner-detail__info-row--phone .of-partner-detail__info-icon,
    .of-partner-detail__info-row--schedule .of-partner-detail__info-icon {
        width: 24px !important;
        height: 24px !important;
        margin-top: 0 !important;
    }

    .of-partner-detail__info-row--address .of-partner-detail__info-icon {
        width: 20px !important;
        height: 20px !important;
        margin-top: 2px !important;
    }

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

    .of-partner-detail__info-label {
        color: #7b8d99 !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 18px !important;
        letter-spacing: 0.2px !important;
    }

    .of-partner-detail__info-value {
        color: var(--of-flow-brand-color, #0f3549) !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 19px !important;
        letter-spacing: 0.15px !important;
        overflow-wrap: anywhere !important;
    }

    .of-partner-detail__info-row--distance .of-partner-detail__info-content {
        gap: 2px !important;
    }

    .of-partner-detail__actions {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 16px auto 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    .of-partner-detail__action,
    .of-partner-detail__action--primary,
    .of-partner-detail__action--secondary {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 50px !important;
        padding: 12px 18px !important;
        gap: 8px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        line-height: 20px !important;
        letter-spacing: 0.2px !important;
        white-space: nowrap !important;
        border-radius: 999px !important;
    }

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

    .of-partner-detail__footer {
        align-self: end !important;
        min-height: var(--of-flow-footer-height, 52px) !important;
        padding: 9px 12px !important;
        color: #ffffff !important;
        background: var(--of-flow-brand-color, #0f3549) !important;
        font-size: 13px !important;
        line-height: 16px !important;
        letter-spacing: 0.15px !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
    }
}


/* Pass 10.88: tablet/mobile partner detail footer must stay within the viewport and wrap like the other flow footers. */
@media (max-width: 1279px) {
    .of-partner-detail__footer {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        text-align: left !important;
    }

    .of-partner-detail__footer > span {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        text-align: left !important;
    }

    .of-partner-detail__footer a {
        color: inherit !important;
        text-decoration: none !important;
    }
}


/* Pass 10.91: align partner detail legal footer text with the T5/map footer.
   This fixes horizontal text position only; footer height is not changed here. */
@media (max-width: 1279px) {
    .of-partner-detail__footer {
        justify-content: center !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    .of-partner-detail__footer > span {
        display: block !important;
        width: 100% !important;
        max-width: 320px !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    .of-partner-detail__footer a {
        color: inherit !important;
        text-decoration: none !important;
    }
}

@media (max-width: 390px) {
    .of-partner-detail__footer {
        padding-right: 14px !important;
        padding-left: 14px !important;
    }
}


/* Pass 10.92: partner detail footer horizontal padding must match T5/map footer. */
@media (max-width: 1279px) {
    .of-partner-detail__footer {
        padding-left: 24px !important;
        padding-right: 24px !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }

    .of-partner-detail__footer > span {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        text-align: left !important;
    }
}


/* Pass 10.94: screen-local legal footer alignment override.
   Keep footer text position identical to the shared footer: 24px from the left and right. */
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;
    padding-left: 24px !important;
    padding-right: 24px !important;
    text-align: left !important;
    box-sizing: border-box !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 {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}


/* Pass 10.95: canonical footer size for all non-desktop shells.
   Text position and footer height now match across map, detail, search and booking. */
@media (max-width: 1279px) {
    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 {
        flex: 0 0 var(--of-flow-footer-height, 52px) !important;
        min-height: var(--of-flow-footer-height, 52px) !important;
        height: var(--of-flow-footer-height, 52px) !important;
        max-height: var(--of-flow-footer-height, 52px) !important;
        padding: 5px 24px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        font-size: 11.5px !important;
        line-height: 14px !important;
        letter-spacing: 0.15px !important;
        text-align: left !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;
        margin: 0 !important;
        white-space: normal !important;
        overflow: hidden !important;
        overflow-wrap: anywhere !important;
        text-align: left !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 {
        flex-basis: var(--of-flow-footer-height, 46px) !important;
        min-height: var(--of-flow-footer-height, 46px) !important;
        height: var(--of-flow-footer-height, 46px) !important;
        max-height: var(--of-flow-footer-height, 46px) !important;
        padding: 3px 24px !important;
        font-size: 10.5px !important;
        line-height: 13px !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 {
        line-height: 13px !important;
    }
}


/* Pass 10.96: fixed non-desktop footer height and stable legal-copy alignment.
   Tablet was inheriting the 88px mobile-flow token; force the same compact footer everywhere below desktop. */
@media (max-width: 1279px) {
    body.of-body {
        --of-flow-footer-height: 52px !important;
    }

    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 {
        flex: 0 0 52px !important;
        min-height: 52px !important;
        height: 52px !important;
        max-height: 52px !important;
        padding: 5px 24px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
        color: #ffffff !important;
        background: var(--of-flow-brand-color, #0f3549) !important;
        font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif) !important;
        font-size: 11.5px !important;
        font-weight: 400 !important;
        line-height: 14px !important;
        letter-spacing: 0.15px !important;
        text-align: left !important;
        box-sizing: border-box !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;
        min-width: 0 !important;
        margin: 0 !important;
        color: inherit !important;
        text-align: left !important;
        white-space: normal !important;
        overflow: hidden !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        line-height: 14px !important;
        box-sizing: border-box !important;
    }

    body.of-body .of-flow-footer a,
    body.of-body .of-search-shell__footer a,
    body.of-body .of-results-shell__footer a,
    body.of-body .of-partner-detail__footer a,
    body.of-body .of-booking__footer a {
        color: inherit !important;
        text-decoration: none !important;
    }
}

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

    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 {
        flex-basis: 46px !important;
        min-height: 46px !important;
        height: 46px !important;
        max-height: 46px !important;
        padding: 3px 24px !important;
        font-size: 10.5px !important;
        line-height: 13px !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 {
        line-height: 13px !important;
    }
}


/* Pass 10.97: restore tablet footer to the responsive shell size.
   Tablet footer is 32px like the original responsive shell; mobile keeps the 52/46px mobile footer. */
@media (min-width: 480px) and (max-width: 1279px) {
    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 {
        flex: 0 0 var(--of-responsive-shell-footer-height, 32px) !important;
        min-height: var(--of-responsive-shell-footer-height, 32px) !important;
        height: var(--of-responsive-shell-footer-height, 32px) !important;
        max-height: var(--of-responsive-shell-footer-height, 32px) !important;
        padding: 6px 24px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
        color: #ffffff !important;
        background: var(--of-flow-brand-color, #0f3549) !important;
        font-size: 10.5px !important;
        line-height: 13px !important;
        letter-spacing: 0.15px !important;
        text-align: left !important;
        box-sizing: border-box !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;
        min-width: 0 !important;
        margin: 0 !important;
        color: inherit !important;
        text-align: left !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: clip !important;
        line-height: 13px !important;
        box-sizing: border-box !important;
    }

    body.of-body .of-flow-footer a,
    body.of-body .of-search-shell__footer a,
    body.of-body .of-results-shell__footer a,
    body.of-body .of-partner-detail__footer a,
    body.of-body .of-booking__footer a {
        color: inherit !important;
        text-decoration: none !important;
    }
}


/* Pass 10.98: contextual partner-detail actions use only text+icon width.
   The detail bubble/modal must not stretch Direções across the whole card. */
#of-home-ctn[data-current-stage="search"] > .of-partner-detail .of-partner-detail__actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 18px 18px !important;
    padding: 0 !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
}

#of-home-ctn[data-current-stage="search"] > .of-partner-detail .of-partner-detail__action,
#of-home-ctn[data-current-stage="search"] > .of-partner-detail .of-partner-detail__action--primary,
#of-home-ctn[data-current-stage="search"] > .of-partner-detail .of-partner-detail__action--secondary {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 38px !important;
    padding: 8px 18px !important;
    gap: 8px !important;
    white-space: nowrap !important;
}

#of-home-ctn[data-current-stage="search"] > .of-partner-detail .of-partner-detail__action-icon {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
}

/* Pass 11.18: mobile partner-detail header height restored; service title only gets a small font bump. */
@media (max-width: 479.98px) {
    body.of-body .of-partner-detail {
        grid-template-rows: var(--of-flow-header-height, 60px) minmax(0, 1fr) auto !important;
    }

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

    body.of-body .of-partner-detail__title {
        font-size: var(--of-flow-mobile-header-title-size, 18px) !important;
        line-height: var(--of-flow-mobile-header-title-line-height, 23px) !important;
        letter-spacing: var(--of-flow-mobile-header-title-letter-spacing, 0.3px) !important;
    }

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

/* Pass 11.26: tablet portrait partner detail uses close X in the header. */
@media (min-width: 740px) and (max-width: 959px) and (orientation: portrait) {
    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__header {
        grid-row: 1 !important;
        display: grid !important;
        grid-template-columns: 40px minmax(0, 1fr) 40px !important;
        align-items: center !important;
        width: 100% !important;
        min-height: var(--of-responsive-shell-header-height, 64px) !important;
        height: var(--of-responsive-shell-header-height, 64px) !important;
        padding: 0 24px !important;
        background: #ffffff !important;
        border-bottom: 1px solid rgba(15, 53, 73, 0.08) !important;
        box-sizing: border-box !important;
    }

    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__title {
        grid-column: 2 !important;
        justify-self: center !important;
        font-size: var(--of-flow-mobile-header-title-size, 18px) !important;
        line-height: var(--of-flow-mobile-header-title-line-height, 23px) !important;
        letter-spacing: var(--of-flow-mobile-header-title-letter-spacing, 0.3px) !important;
        text-align: center !important;
    }

    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__back {
        grid-column: 3 !important;
        justify-self: end !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 32px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #2f3033 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 999px !important;
    }

    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__back-icon {
        position: relative !important;
        display: block !important;
        width: 18px !important;
        height: 18px !important;
        background: transparent !important;
        clip-path: none !important;
    }

    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__back-icon::before,
    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__back-icon::after {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: 18px !important;
        height: 1.6px !important;
        background: currentColor !important;
        border-radius: 999px !important;
        transform-origin: center !important;
    }

    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__back-icon::before {
        transform: translate(-50%, -50%) rotate(45deg) !important;
    }

    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__back-icon::after {
        transform: translate(-50%, -50%) rotate(-45deg) !important;
    }

    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__header-spacer {
        display: none !important;
    }

    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__body {
        grid-row: 2 !important;
        display: grid !important;
        align-content: start !important;
        justify-items: center !important;
        min-height: 0 !important;
        padding: 24px 24px 28px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background: var(--of-flow-page-bg, #f6f6f6) !important;
        box-sizing: border-box !important;
    }

    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__card {
        display: grid !important;
        width: min(100%, 326px) !important;
        margin: 0 auto !important;
        background: #ffffff !important;
        box-sizing: border-box !important;
    }

    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__footer {
        grid-row: 3 !important;
        display: flex !important;
        width: 100% !important;
    }
}

/* Pass 11.27: tablet portrait partner detail full-card layout and single desktop-style close. */
@media (min-width: 740px) and (max-width: 959px) and (orientation: portrait) {
    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__header {
        grid-row: 1 !important;
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) 44px !important;
        align-items: center !important;
        width: 100% !important;
        min-height: var(--of-responsive-shell-header-height, 64px) !important;
        height: var(--of-responsive-shell-header-height, 64px) !important;
        max-height: var(--of-responsive-shell-header-height, 64px) !important;
        padding: 0 24px !important;
        background: #ffffff !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(15, 53, 73, 0.08) !important;
        box-sizing: border-box !important;
    }

    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__title {
        grid-column: 2 !important;
        justify-self: center !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        color: var(--of-flow-brand-color, #0f3549) !important;
        font-size: var(--of-flow-mobile-header-title-size, 18px) !important;
        font-weight: 700 !important;
        line-height: var(--of-flow-mobile-header-title-line-height, 23px) !important;
        letter-spacing: var(--of-flow-mobile-header-title-letter-spacing, 0.3px) !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__back {
        grid-column: 3 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 32px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #2f3033 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 999px !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__back-icon {
        position: relative !important;
        display: block !important;
        width: 18px !important;
        height: 18px !important;
        background: transparent !important;
        clip-path: none !important;
    }

    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__back-icon::before,
    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__back-icon::after {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: 18px !important;
        height: 1.6px !important;
        background: currentColor !important;
        border-radius: 999px !important;
        transform-origin: center !important;
    }

    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__back-icon::before {
        transform: translate(-50%, -50%) rotate(45deg) !important;
    }

    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__back-icon::after {
        transform: translate(-50%, -50%) rotate(-45deg) !important;
    }

    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__header-spacer,
    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__close {
        display: none !important;
    }

    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__body {
        grid-row: 2 !important;
        display: grid !important;
        align-content: start !important;
        justify-items: center !important;
        min-height: 0 !important;
        padding: 32px clamp(40px, 8vw, 72px) 32px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background: var(--of-flow-page-bg, #f6f6f6) !important;
        box-sizing: border-box !important;
    }

    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail[data-partner-detail-state="empty"] .of-partner-detail__empty {
        display: block !important;
        width: min(100%, 520px) !important;
        margin: 0 auto !important;
        padding: 28px 32px !important;
        color: var(--of-flow-brand-color, #0f3549) !important;
        background: #ffffff !important;
        border-radius: 5px !important;
        box-sizing: border-box !important;
    }

    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail[data-partner-detail-state="ready"] .of-partner-detail__card {
        display: grid !important;
    }

    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail[data-partner-detail-state="empty"] .of-partner-detail__card,
    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail[data-partner-detail-state="empty"] .of-partner-detail__actions {
        display: none !important;
    }

    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__card {
        position: relative !important;
        display: grid !important;
        gap: 22px !important;
        width: min(100%, 520px) !important;
        margin: 0 auto !important;
        padding: 50px 34px 32px !important;
        background: #ffffff !important;
        border: 0 !important;
        border-radius: 5px !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__classification {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        justify-self: auto !important;
        max-width: 180px !important;
        min-height: 24px !important;
        margin: 0 !important;
        padding: 3px 9px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 18px !important;
        letter-spacing: 0.15px !important;
        border-radius: 2px !important;
        white-space: nowrap !important;
    }

    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__name {
        font-size: 22px !important;
        font-weight: 600 !important;
        line-height: 28px !important;
        letter-spacing: 0.35px !important;
        overflow-wrap: anywhere !important;
    }

    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__service {
        display: none !important;
    }

    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__info-list {
        display: grid !important;
        gap: 18px !important;
        margin: 0 !important;
    }

    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__info-row {
        display: grid !important;
        grid-template-columns: 32px minmax(0, 1fr) !important;
        gap: 12px !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-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__info-row[hidden] {
        display: none !important;
    }

    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__info-icon {
        width: 22px !important;
        height: 22px !important;
        justify-self: center !important;
        margin-top: 2px !important;
        object-fit: contain !important;
    }

    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__info-label {
        color: #7b8d99 !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 18px !important;
        letter-spacing: 0.2px !important;
    }

    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__info-value {
        color: var(--of-flow-brand-color, #0f3549) !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 19px !important;
        letter-spacing: 0.15px !important;
        overflow-wrap: anywhere !important;
    }

    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__actions {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        width: min(100%, 520px) !important;
        max-width: 520px !important;
        margin: 20px auto 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__action,
    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__action--primary,
    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__action--secondary {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 48px !important;
        padding: 11px 20px !important;
        gap: 8px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 20px !important;
        letter-spacing: 0.2px !important;
        white-space: nowrap !important;
        border-radius: 999px !important;
    }

    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__footer {
        grid-row: 3 !important;
        display: flex !important;
        width: 100% !important;
        min-height: var(--of-responsive-shell-footer-height, 32px) !important;
        height: var(--of-responsive-shell-footer-height, 32px) !important;
    }
}

/* Pass 11.28: tablet header service title typography standard. */
@media (min-width: 740px) and (max-width: 1199px) {
    .of-partner-detail__title {
        justify-self: center !important;
        color: var(--ayvens-theme-brand-secondary-400, #0f3549) !important;
        font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif) !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 20px !important;
        letter-spacing: 0.2px !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* Pass 11.37: canonical tablet/desktop service header title alignment. */
@media (min-width: 740px) {
    body.of-body #of-home-ctn {
        --of-canonical-service-header-height: 64px;
        --of-canonical-service-title-size: 16px;
        --of-canonical-service-title-line-height: 20px;
        --of-canonical-service-title-letter-spacing: 0.2px;
    }

    body.of-body #of-home-ctn .of-search-shell--step-title .of-search-shell__header,
    body.of-body #of-home-ctn[data-results-state="ready"] .of-results-shell__header,
    body.of-body #of-home-ctn[data-results-state="empty"] .of-results-shell__header,
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__header,
    body.of-body #of-home-ctn[data-current-stage="booking"] > #of-booking-panel.of-booking .of-booking__header {
        position: relative !important;
        min-height: var(--of-canonical-service-header-height) !important;
        height: var(--of-canonical-service-header-height) !important;
        max-height: var(--of-canonical-service-header-height) !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    body.of-body #of-home-ctn .of-search-shell--step-title .of-search-shell__logo,
    body.of-body #of-home-ctn[data-results-state="ready"] .of-results-shell__title,
    body.of-body #of-home-ctn[data-results-state="empty"] .of-results-shell__title,
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__title,
    body.of-body #of-home-ctn[data-current-stage="booking"] > #of-booking-panel.of-booking .of-booking__title {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100vw - 144px) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--ayvens-theme-brand-secondary-400, #0f3549) !important;
        font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif) !important;
        font-size: var(--of-canonical-service-title-size) !important;
        font-weight: 700 !important;
        line-height: var(--of-canonical-service-title-line-height) !important;
        letter-spacing: var(--of-canonical-service-title-letter-spacing) !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-indent: 0 !important;
        background: none !important;
        background-image: none !important;
        box-sizing: border-box !important;
    }

    body.of-body #of-home-ctn[data-results-state="ready"] .of-results-shell__heading,
    body.of-body #of-home-ctn[data-results-state="empty"] .of-results-shell__heading {
        position: static !important;
        display: block !important;
        width: auto !important;
        height: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}


/* Pass 11.47: client feedback - detail cards keep only the blue icon plus value, labels removed. */
.of-partner-detail__info-label {
    display: none !important;
}

.of-partner-detail__info-icon {
    filter: brightness(0) saturate(100%) invert(17%) sepia(34%) saturate(963%) hue-rotate(158deg) brightness(91%) contrast(93%) !important;
}

.of-partner-detail__info-content,
.of-partner-detail__info-row--distance .of-partner-detail__info-content {
    gap: 0 !important;
}

.of-partner-detail__info-value:empty {
    display: none !important;
}

/* Phase 12: AXAWHATSAPP contextual detail needs room for the longer "Selecionar esta oficina" action. */
@media (min-width: 1280px) {
    #of-home-ctn[data-access-from="AXAWHATSAPP"][data-current-stage="search"][data-results-state="ready"] > .of-partner-detail,
    #of-home-ctn[data-access-from="AXAWHATSAPP"][data-current-stage="search"][data-results-state="empty"] > .of-partner-detail {
        width: 370px !important;
        max-width: calc(100vw - 408px) !important;
    }
}

/* Phase 13: tablet detail shell height contract.
   Detail uses the same header / content / footer contract so the footer never
   follows the card to the middle of the screen on tablet sizes. */
@media (min-width: 740px) and (max-width: 1279px) {
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] {
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail {
        width: 100%;
        max-width: none;
        height: 100%;
        min-height: 0;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        grid-template-rows: var(--of-flow-header-height, 88px) minmax(0, 1fr) auto;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] .of-partner-detail__body {
        min-height: 0;
        overflow-y: auto;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] .of-partner-detail__footer {
        flex: 0 0 auto;
        border-radius: 0;
    }
}

.of-partner-detail__phone-link {
    color: inherit;
    text-decoration: none;
}

.of-partner-detail__phone-link:hover,
.of-partner-detail__phone-link:focus {
    text-decoration: underline;
}

.of-partner-detail__phone-link[aria-disabled="true"] {
    pointer-events: none;
}

/* 20260701 PRD-002: client feedback - visible hover/active states for detail actions. */
.of-partner-detail__action {
    transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 80ms ease !important;
}

.of-partner-detail__action--primary:not(:disabled):hover {
    background-color: #163f55 !important;
    border-color: #163f55 !important;
    box-shadow: 0 2px 8px rgba(15, 53, 73, 0.18) !important;
}

.of-partner-detail__action--primary:not(:disabled):active {
    background-color: #08283a !important;
    border-color: #08283a !important;
    box-shadow: none !important;
    transform: translateY(1px) !important;
}

.of-partner-detail__action--secondary:not(:disabled):hover {
    background-color: #f4f8fa !important;
    border-color: var(--of-flow-brand-color, #0f3549) !important;
    box-shadow: 0 2px 8px rgba(15, 53, 73, 0.14) !important;
}

.of-partner-detail__action--secondary:not(:disabled):active {
    background-color: #eaf1f4 !important;
    border-color: var(--of-flow-brand-color, #0f3549) !important;
    box-shadow: none !important;
    transform: translateY(1px) !important;
}


/* 20260701 PRD-003: client feedback - force visible hover/active state on detail Directions action. */
body.of-body #of-home-ctn .of-partner-detail .of-partner-detail__action--secondary:not(:disabled):hover,
body.of-body #of-home-ctn[data-current-stage="partner-detail"] .of-partner-detail .of-partner-detail__action--secondary:not(:disabled):hover,
body.of-body #of-home-ctn[data-current-stage="search"] .of-partner-detail .of-partner-detail__action--secondary:not(:disabled):hover {
    background-color: #eaf1f4 !important;
    border-color: var(--of-flow-brand-color, #0f3549) !important;
    box-shadow: 0 2px 8px rgba(15, 53, 73, 0.18) !important;
    transform: translateY(-1px) !important;
}

body.of-body #of-home-ctn .of-partner-detail .of-partner-detail__action--secondary:not(:disabled):active,
body.of-body #of-home-ctn[data-current-stage="partner-detail"] .of-partner-detail .of-partner-detail__action--secondary:not(:disabled):active,
body.of-body #of-home-ctn[data-current-stage="search"] .of-partner-detail .of-partner-detail__action--secondary:not(:disabled):active {
    background-color: #dce8ee !important;
    border-color: var(--of-flow-brand-color, #0f3549) !important;
    box-shadow: none !important;
    transform: translateY(1px) !important;
}


/* 20260701 PRD-004: keep detail Directions hover/active visually stable, without vertical movement. */
body.of-body #of-home-ctn .of-partner-detail .of-partner-detail__action--secondary:not(:disabled),
body.of-body #of-home-ctn[data-current-stage="partner-detail"] .of-partner-detail .of-partner-detail__action--secondary:not(:disabled),
body.of-body #of-home-ctn[data-current-stage="search"] .of-partner-detail .of-partner-detail__action--secondary:not(:disabled) {
    transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease !important;
}

body.of-body #of-home-ctn .of-partner-detail .of-partner-detail__action--secondary:not(:disabled):hover,
body.of-body #of-home-ctn[data-current-stage="partner-detail"] .of-partner-detail .of-partner-detail__action--secondary:not(:disabled):hover,
body.of-body #of-home-ctn[data-current-stage="search"] .of-partner-detail .of-partner-detail__action--secondary:not(:disabled):hover,
body.of-body #of-home-ctn .of-partner-detail .of-partner-detail__action--secondary:not(:disabled):active,
body.of-body #of-home-ctn[data-current-stage="partner-detail"] .of-partner-detail .of-partner-detail__action--secondary:not(:disabled):active,
body.of-body #of-home-ctn[data-current-stage="search"] .of-partner-detail .of-partner-detail__action--secondary:not(:disabled):active {
    transform: none !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: 24px;
    height: 24px;
    background-color: transparent;
    background-image: url("/Images/Flow/Icons/Icons_chevron-left-bg.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 24px 24px;
    clip-path: none;
}

.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;
    }

    .of-booking__title {
        font-size: var(--of-flow-mobile-header-title-size, 16px);
        line-height: var(--of-flow-mobile-header-title-line-height, 20px);
        letter-spacing: var(--of-flow-mobile-header-title-letter-spacing, 0.2px);
    }
}

@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: var(--of-flow-mobile-header-title-size, 16px);
        line-height: var(--of-flow-mobile-header-title-line-height, 20px);
        letter-spacing: var(--of-flow-mobile-header-title-letter-spacing, 0.2px);
    }

    .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: var(--of-flow-mobile-header-title-size, 16px);
        line-height: var(--of-flow-mobile-header-title-line-height, 20px);
        letter-spacing: var(--of-flow-mobile-header-title-letter-spacing, 0.2px);
    }

    .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;
}

/* T9 mobile calendar: keep the month label visible in the compact header. */
@media (max-width: 480px) {
    .of-booking-calendar__header {
        grid-template-columns: 26px minmax(0, 1fr) 26px;
        gap: 8px;
    }

    .of-booking-calendar__nav-btn {
        width: 26px;
        min-width: 26px;
    }

    .of-booking-calendar__heading {
        grid-template-columns: minmax(104px, 1fr) 78px;
        gap: 6px;
    }

    .of-booking-calendar__select {
        min-width: 0;
        padding-left: 10px;
        padding-right: 26px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: clip;
    }

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

/* T9 calendar: real month/year selects. */
.of-booking-calendar__select {
    display: block;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    background-color: #ffffff;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position:
        calc(100% - 16px) 50%,
        calc(100% - 10px) 50%;
    background-size: 7px 7px, 7px 7px;
    background-repeat: no-repeat;
}

.of-booking-calendar__select::-ms-expand {
    display: none;
}

.of-booking-calendar__select::after {
    display: none;
    content: none;
}

@media (max-width: 480px) {
    .of-booking-calendar__select {
        background-position:
            calc(100% - 15px) 50%,
            calc(100% - 9px) 50%;
        background-size: 6px 6px, 6px 6px;
    }
}

/* T9 mobile calendar: center month/year between arrows and keep only current/next year from script. */
@media (max-width: 480px) {
    .of-booking-calendar__header {
        grid-template-columns: 28px minmax(0, 1fr) 28px;
        gap: 8px;
    }

    .of-booking-calendar__nav-btn {
        width: 28px;
        min-width: 28px;
    }

    .of-booking-calendar__heading {
        grid-template-columns: 112px 86px;
        justify-content: center;
        gap: 8px;
    }

    .of-booking-calendar__select {
        width: 100%;
        min-width: 0;
        padding-left: 12px;
        padding-right: 28px;
    }

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

/* T9 mobile calendar: add breathing room between arrows and dropdowns. */
@media (max-width: 480px) {
    .of-booking-calendar__header {
        grid-template-columns: 22px minmax(0, 206px) 22px;
        column-gap: 14px;
        justify-content: center;
    }

    .of-booking-calendar__nav-btn {
        width: 22px;
        min-width: 22px;
    }

    .of-booking-calendar__heading {
        grid-template-columns: 112px 86px;
        gap: 8px;
        justify-content: center;
    }
}


/* T9 mobile calendar: fix arrow/dropdown spacing without changing arrow box size. */
@media (max-width: 480px) {
    .of-booking-calendar__header {
        grid-template-columns: 22px minmax(0, 206px) 22px;
        column-gap: 20px;
        justify-content: center;
    }

    .of-booking-calendar__nav-btn {
        width: 22px;
        min-width: 22px;
        padding: 0;
        box-sizing: border-box;
    }

    .of-booking-calendar__heading {
        grid-template-columns: 112px 86px;
        gap: 8px;
        justify-content: center;
    }
}

/* Desktop conversion journey: full-screen booking modal with stepper. */
.of-booking-stepper {
    display: none;
}

@media (min-width: 740px) {
    #of-home-ctn[data-current-stage="booking"] {
        position: fixed;
        inset: 0;
        z-index: 900;
        display: grid;
        width: 100vw;
        height: 100dvh;
        min-height: 100dvh;
        background: #f3f3f1;
        overflow: hidden;
    }

    #of-home-ctn[data-current-stage="booking"] > .of-booking {
        position: relative;
        width: 100vw !important;
        max-width: none !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .of-booking {
        grid-template-rows: 52px minmax(0, 1fr) 34px;
        background: #f3f3f1;
    }

    .of-booking__header {
        grid-template-columns: 160px minmax(0, 1fr) 44px;
        min-height: 52px;
        height: 52px;
        padding: 0 24px;
        background: #ffffff;
    }

    .of-booking__title {
        justify-self: start;
        width: 92px;
        height: 18px;
        color: transparent;
        font-size: 0;
        line-height: 0;
        text-align: left;
        background-image: url("/Images/ayvens-logo.svg");
        background-repeat: no-repeat;
        background-position: left center;
        background-size: contain;
        overflow: hidden;
    }

    .of-booking__back {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        width: 28px;
        height: 28px;
        color: #2f3033;
    }

    .of-booking__back-icon {
        position: relative;
        width: 16px;
        height: 16px;
        background-color: transparent;
        clip-path: none;
    }

    .of-booking__back-icon::before,
    .of-booking__back-icon::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 17px;
        height: 1.5px;
        background: currentColor;
        border-radius: 999px;
        transform-origin: center;
    }

    .of-booking__back-icon::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .of-booking__back-icon::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    .of-booking__header-spacer {
        display: none;
    }

    .of-booking__body {
        display: grid;
        align-content: start;
        justify-items: center;
        gap: 0;
        min-height: 0;
        padding: 24px 32px 28px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .of-booking__footer {
        min-height: 34px;
        height: 34px;
        padding: 6px 24px;
        border-radius: 0 !important;
        font-size: 10px;
        line-height: 14px;
        letter-spacing: 0.2px;
    }

    .of-booking-stepper {
        display: block;
        width: min(100%, 560px);
        margin: 0 auto 14px;
        padding: 10px 18px 12px;
        background: #ffffff;
        border-radius: 2px;
        box-sizing: border-box;
    }

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

    .of-booking-stepper__list {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .of-booking-stepper__item {
        position: relative;
        display: grid;
        justify-items: center;
        gap: 5px;
        min-width: 0;
        color: #8b949b;
        font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
        font-size: 10px;
        font-weight: 500;
        line-height: 14px;
        text-align: center;
    }

    .of-booking-stepper__item:not(:last-child)::after {
        content: "";
        position: absolute;
        left: calc(50% + 10px);
        right: calc(-50% + 10px);
        top: 7px;
        height: 1px;
        background: #d7dde1;
    }

    .of-booking-stepper__dot {
        position: relative;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        color: #ffffff;
        background: #d7dde1;
        border-radius: 999px;
        box-sizing: border-box;
    }

    .of-booking[data-booking-state="schedule"] .of-booking-stepper__item--schedule,
    .of-booking[data-booking-state="ready"] .of-booking-stepper__item--details,
    .of-booking[data-booking-state="summary"] .of-booking-stepper__item--summary,
    .of-booking[data-booking-state="confirmed"] .of-booking-stepper__item--confirmation {
        color: var(--of-flow-brand-color, #0f3549);
        font-weight: 700;
    }

    .of-booking[data-booking-state="schedule"] .of-booking-stepper__item--schedule .of-booking-stepper__dot,
    .of-booking[data-booking-state="ready"] .of-booking-stepper__item--details .of-booking-stepper__dot,
    .of-booking[data-booking-state="summary"] .of-booking-stepper__item--summary .of-booking-stepper__dot,
    .of-booking[data-booking-state="confirmed"] .of-booking-stepper__item--confirmation .of-booking-stepper__dot {
        background: var(--of-flow-brand-color, #0f3549);
    }

    .of-booking[data-booking-state="ready"] .of-booking-stepper__item--schedule .of-booking-stepper__dot,
    .of-booking[data-booking-state="summary"] .of-booking-stepper__item--schedule .of-booking-stepper__dot,
    .of-booking[data-booking-state="summary"] .of-booking-stepper__item--details .of-booking-stepper__dot,
    .of-booking[data-booking-state="confirmed"] .of-booking-stepper__item--schedule .of-booking-stepper__dot,
    .of-booking[data-booking-state="confirmed"] .of-booking-stepper__item--details .of-booking-stepper__dot,
    .of-booking[data-booking-state="confirmed"] .of-booking-stepper__item--summary .of-booking-stepper__dot {
        background: var(--of-flow-brand-color, #0f3549);
    }

    .of-booking[data-booking-state="ready"] .of-booking-stepper__item--schedule .of-booking-stepper__dot::before,
    .of-booking[data-booking-state="summary"] .of-booking-stepper__item--schedule .of-booking-stepper__dot::before,
    .of-booking[data-booking-state="summary"] .of-booking-stepper__item--details .of-booking-stepper__dot::before,
    .of-booking[data-booking-state="confirmed"] .of-booking-stepper__item--schedule .of-booking-stepper__dot::before,
    .of-booking[data-booking-state="confirmed"] .of-booking-stepper__item--details .of-booking-stepper__dot::before,
    .of-booking[data-booking-state="confirmed"] .of-booking-stepper__item--summary .of-booking-stepper__dot::before {
        content: "";
        width: 7px;
        height: 4px;
        border-left: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: translateY(-1px) rotate(-45deg);
    }

    .of-booking__empty {
        width: min(100%, 560px);
        margin: 0 auto;
        padding: 28px 32px;
        background: #ffffff;
        border-radius: 2px;
    }

    .of-booking__content {
        justify-self: center;
        width: min(100%, 560px);
        max-width: 560px;
        padding: 24px 30px 26px;
        background: #ffffff;
        border-radius: 2px;
        box-shadow: none;
        box-sizing: border-box;
    }

    .of-booking-schedule__intro,
    .of-booking-details__intro,
    .of-booking-summary__intro {
        gap: 5px;
    }

    .of-booking-schedule__title,
    .of-booking-details__title,
    .of-booking-summary__title {
        font-size: 18px;
        line-height: 23px;
        letter-spacing: 0.2px;
    }

    .of-booking-schedule__lead,
    .of-booking-details__lead {
        max-width: none;
        font-size: 12px;
        line-height: 17px;
        letter-spacing: 0.2px;
    }

    .of-booking__content--schedule {
        width: min(100%, 560px);
        max-width: 560px;
        gap: 16px;
    }

    .of-booking-schedule {
        grid-template-columns: minmax(0, 330px) 132px;
        align-items: start;
        justify-content: space-between;
        gap: 28px;
    }

    .of-booking-calendar {
        gap: 8px;
        padding: 0;
        background: transparent;
    }

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

    .of-booking-calendar__nav-btn {
        width: 24px;
        min-width: 24px;
        height: 28px;
        font-size: 28px;
    }

    .of-booking-calendar__heading {
        grid-template-columns: minmax(0, 1fr) 78px;
        gap: 7px;
    }

    .of-booking-calendar__select {
        min-height: 30px;
        padding: 0 24px 0 9px;
        font-size: 12px;
        line-height: 16px;
        background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%;
        background-size: 5px 5px, 5px 5px;
    }

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

    .of-booking-calendar__weekdays span {
        font-size: 10px;
        line-height: 14px;
    }

    .of-booking-calendar__day {
        width: 25px;
        min-width: 25px;
        height: 25px;
        min-height: 25px;
        font-size: 11px;
        line-height: 15px;
        border-radius: 5px;
    }

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

    .of-booking-schedule__section-title {
        font-size: 12px;
        line-height: 16px;
        letter-spacing: 0.2px;
    }

    .of-booking-schedule__hours {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
        min-height: 0;
        margin: 0;
        overflow: visible;
    }

    .of-booking-schedule-item {
        width: 100%;
        min-width: 0;
        min-height: 30px;
        padding: 6px 10px;
        font-size: 12px;
        line-height: 16px;
        border-radius: 5px;
    }

    .of-booking__actions {
        justify-content: flex-end;
        gap: 10px;
    }

    .of-booking__actions--schedule {
        margin-top: 0;
    }

    .of-booking__actions .of-search-action,
    .of-booking__actions--details .of-search-action--primary,
    #of-booking-summary-confirm-btn,
    #of-booking-confirmation-back-btn {
        min-height: 34px;
        padding: 7px 16px;
        border-radius: 5px;
        font-size: 11px;
        line-height: 16px;
    }

    .of-booking__content--details {
        width: min(100%, 760px);
        max-width: 760px;
        gap: 16px;
    }

    .of-booking[data-booking-state="ready"] .of-booking-stepper {
        width: min(100%, 760px);
    }

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

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

    .of-booking-details__section:nth-child(3) {
        grid-column: 2;
        grid-row: 1 / span 3;
    }

    .of-booking-details__section:nth-child(4) {
        grid-column: 1;
    }

    .of-booking-details__section-title {
        font-size: 13px;
        line-height: 18px;
    }

    .of-booking .of-search-field__label,
    .of-booking-details__field-block > .of-search-field__label {
        font-size: 10px;
        line-height: 14px;
    }

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

    .of-booking-details__section .of-search-input,
    .of-booking-details textarea.of-search-input {
        min-height: 34px;
        padding: 7px 38px 7px 10px !important;
        font-size: 11px;
        line-height: 16px;
    }

    .of-booking-details__choice-group {
        gap: 8px;
    }

    .of-booking-details__choice {
        min-height: 34px;
        padding: 0 10px;
        font-size: 11px;
        line-height: 16px;
    }

    .of-booking-details__choice-help {
        font-size: 10px;
        line-height: 14px;
    }

    .of-booking-details__textarea {
        min-height: 72px !important;
    }

    .of-booking-details__valid::after,
    .of-booking-details__invalid::after {
        right: 12px !important;
        bottom: 8px !important;
        width: 16px !important;
        height: 16px !important;
        background-size: 16px 16px !important;
    }

    .of-booking-details__field-block.of-booking-details__valid::after,
    .of-booking-details__field-block.of-booking-details__invalid::after {
        top: 23px !important;
        right: 8px !important;
    }

    .of-booking-details__textarea-wrap.of-booking-details__valid::after,
    .of-booking-details__textarea-wrap.of-booking-details__invalid::after {
        top: 9px !important;
        right: 10px !important;
    }

    .of-booking__actions--details {
        margin-top: 0;
    }

    .of-booking__content--summary {
        width: min(100%, 760px);
        max-width: 760px;
        gap: 16px;
    }

    .of-booking[data-booking-state="summary"] .of-booking-stepper {
        width: min(100%, 760px);
    }

    .of-booking-summary {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 0.72fr);
        gap: 18px;
    }

    .of-booking-summary__card {
        padding: 16px 18px;
        border: 1px solid #edf0f2;
        border-radius: 3px;
    }

    .of-booking-summary__card:first-child {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .of-booking-summary__section-title,
    .of-booking-summary__label,
    .of-booking-summary__contact-row dt {
        font-size: 11px;
        line-height: 16px;
    }

    .of-booking-summary__value,
    .of-booking-summary__contact-row dd {
        font-size: 12px;
        line-height: 17px;
    }

    .of-booking-summary__contact-row {
        grid-template-columns: 76px minmax(0, 1fr);
    }

    .of-booking__actions--summary {
        margin-top: 0;
    }

    .of-booking__content--confirmation {
        width: min(100%, 520px);
        max-width: 520px;
        gap: 24px;
        min-height: auto;
        padding: 28px 36px 32px;
    }

    .of-booking[data-booking-state="confirmed"] .of-booking-stepper {
        width: min(100%, 520px);
    }

    .of-booking-confirmation {
        gap: 16px;
    }

    .of-booking-confirmation__icon {
        width: 70px !important;
        height: 70px !important;
    }

    .of-booking-confirmation__title {
        max-width: 360px;
        font-size: 14px;
        line-height: 20px;
    }

    .of-booking-confirmation__next {
        max-width: 360px;
        margin-top: 2px;
        padding: 14px 16px;
        border-color: #edf0f2;
    }

    .of-booking-confirmation__subtitle {
        font-size: 12px;
        line-height: 17px;
    }

    .of-booking-confirmation__text {
        font-size: 11px;
        line-height: 16px;
    }
}

/* Pass 10.37: desktop booking modal aligned with Figma and client notes. */
@media (min-width: 740px) {
    #of-home-ctn[data-current-stage="booking"] {
        position: fixed;
        inset: 0;
        z-index: 900;
        display: grid;
        align-items: center;
        justify-items: center;
        width: 100vw;
        height: 100dvh;
        min-height: 100dvh;
        padding: 34px 48px;
        background: rgba(0, 0, 0, 0.32);
        box-sizing: border-box;
        overflow: hidden;
    }

    #of-home-ctn[data-current-stage="booking"] > .of-booking {
        position: relative;
        display: grid;
        grid-template-rows: 58px minmax(0, auto);
        align-content: center;
        justify-items: center;
        width: min(100%, 820px) !important;
        max-width: 820px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 68px);
        margin: 0 !important;
        color: var(--of-flow-brand-color, #0f3549);
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
    }

    .of-booking__header {
        display: grid;
        grid-template-columns: 160px minmax(0, 1fr) 32px;
        align-items: center;
        width: 100%;
        min-height: 58px;
        height: 58px;
        padding: 0 24px;
        background: #ffffff;
        border: 1px solid #d7dde1;
        border-bottom: 0;
        border-radius: 4px 4px 0 0;
        box-sizing: border-box;
    }

    .of-booking__body {
        display: grid;
        align-content: start;
        justify-items: center;
        gap: 16px;
        width: 100%;
        min-height: 0;
        max-height: calc(100dvh - 126px);
        padding: 22px 58px 26px;
        background: #f3f3f1;
        border: 1px solid #d7dde1;
        border-top: 0;
        border-radius: 0 0 4px 4px;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .of-booking__footer {
        display: none;
    }

    .of-booking__title {
        justify-self: start;
        width: 118px;
        height: 28px;
        color: transparent;
        font-size: 0;
        line-height: 0;
        text-align: left;
        background-image: url("/Images/ayvens-logo.svg");
        background-repeat: no-repeat;
        background-position: left center;
        background-size: contain;
        overflow: hidden;
    }

    .of-booking__back,
    .of-booking[data-booking-state="confirmed"] .of-booking__back {
        visibility: visible;
        pointer-events: auto;
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        width: 28px;
        height: 28px;
        color: #2f3033;
        background: transparent;
        border: 0;
        border-radius: 999px;
    }

    .of-booking__back-icon {
        position: relative;
        width: 16px;
        height: 16px;
        background-color: transparent;
        clip-path: none;
    }

    .of-booking__back-icon::before,
    .of-booking__back-icon::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 16px;
        height: 1.4px;
        background: currentColor;
        border-radius: 999px;
        transform-origin: center;
    }

    .of-booking__back-icon::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .of-booking__back-icon::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    .of-booking__header-spacer {
        display: none;
    }

    .of-booking-stepper {
        display: block;
        width: min(100%, 580px) !important;
        margin: 0 auto 4px;
        padding: 12px 22px 10px;
        background: #ffffff;
        border: 0;
        border-radius: 3px;
        box-sizing: border-box;
    }

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

    .of-booking-stepper__list {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        margin: 0;
        padding: 0;
        list-style: none;
        counter-reset: booking-step;
    }

    .of-booking-stepper__item {
        position: relative;
        display: grid;
        justify-items: center;
        gap: 6px;
        min-width: 0;
        color: #8b949b;
        font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
        font-size: 10px;
        font-weight: 500;
        line-height: 14px;
        text-align: center;
        counter-increment: booking-step;
    }

    .of-booking-stepper__item:not(:last-child)::after {
        content: "";
        position: absolute;
        z-index: 0;
        left: calc(50% + 17px);
        right: calc(-50% + 17px);
        top: 12px;
        height: 1px;
        background: #d7dde1;
    }

    .of-booking[data-booking-state="ready"] .of-booking-stepper__item--schedule::after,
    .of-booking[data-booking-state="summary"] .of-booking-stepper__item--schedule::after,
    .of-booking[data-booking-state="summary"] .of-booking-stepper__item--details::after,
    .of-booking[data-booking-state="confirmed"] .of-booking-stepper__item--schedule::after,
    .of-booking[data-booking-state="confirmed"] .of-booking-stepper__item--details::after,
    .of-booking[data-booking-state="confirmed"] .of-booking-stepper__item--summary::after {
        background: var(--of-flow-brand-color, #0f3549);
    }

    .of-booking-stepper__dot {
        position: relative;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        color: var(--of-flow-brand-color, #0f3549);
        background: #ffffff;
        border: 1px solid var(--of-flow-brand-color, #0f3549);
        border-radius: 999px;
        box-sizing: border-box;
    }

    .of-booking-stepper__dot::before {
        content: counter(booking-step);
        color: currentColor;
        font-size: 10px;
        font-weight: 700;
        line-height: 1;
    }

    .of-booking[data-booking-state="schedule"] .of-booking-stepper__item--schedule,
    .of-booking[data-booking-state="ready"] .of-booking-stepper__item--details,
    .of-booking[data-booking-state="summary"] .of-booking-stepper__item--summary,
    .of-booking[data-booking-state="confirmed"] .of-booking-stepper__item--confirmation {
        color: var(--of-flow-brand-color, #0f3549);
        font-weight: 700;
    }

    .of-booking[data-booking-state="schedule"] .of-booking-stepper__item--schedule .of-booking-stepper__dot,
    .of-booking[data-booking-state="ready"] .of-booking-stepper__item--details .of-booking-stepper__dot,
    .of-booking[data-booking-state="summary"] .of-booking-stepper__item--summary .of-booking-stepper__dot,
    .of-booking[data-booking-state="confirmed"] .of-booking-stepper__item--confirmation .of-booking-stepper__dot {
        color: #ffffff;
        background: var(--of-flow-brand-color, #0f3549);
        border-color: var(--of-flow-brand-color, #0f3549);
    }

    .of-booking[data-booking-state="ready"] .of-booking-stepper__item--schedule .of-booking-stepper__dot,
    .of-booking[data-booking-state="summary"] .of-booking-stepper__item--schedule .of-booking-stepper__dot,
    .of-booking[data-booking-state="summary"] .of-booking-stepper__item--details .of-booking-stepper__dot,
    .of-booking[data-booking-state="confirmed"] .of-booking-stepper__item--schedule .of-booking-stepper__dot,
    .of-booking[data-booking-state="confirmed"] .of-booking-stepper__item--details .of-booking-stepper__dot,
    .of-booking[data-booking-state="confirmed"] .of-booking-stepper__item--summary .of-booking-stepper__dot {
        color: #ffffff;
        background: var(--of-flow-brand-color, #0f3549);
        border-color: var(--of-flow-brand-color, #0f3549);
    }

    .of-booking[data-booking-state="ready"] .of-booking-stepper__item--schedule .of-booking-stepper__dot::before,
    .of-booking[data-booking-state="summary"] .of-booking-stepper__item--schedule .of-booking-stepper__dot::before,
    .of-booking[data-booking-state="summary"] .of-booking-stepper__item--details .of-booking-stepper__dot::before,
    .of-booking[data-booking-state="confirmed"] .of-booking-stepper__item--schedule .of-booking-stepper__dot::before,
    .of-booking[data-booking-state="confirmed"] .of-booking-stepper__item--details .of-booking-stepper__dot::before,
    .of-booking[data-booking-state="confirmed"] .of-booking-stepper__item--summary .of-booking-stepper__dot::before {
        content: "";
        width: 8px;
        height: 5px;
        border-left: 1.7px solid currentColor;
        border-bottom: 1.7px solid currentColor;
        transform: translateY(-1px) rotate(-45deg);
    }

    .of-booking__content {
        justify-self: center;
        width: min(100%, 580px);
        max-width: 580px;
        padding: 0;
        color: var(--of-flow-brand-color, #0f3549);
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        box-sizing: border-box;
    }

    .of-booking-schedule__intro,
    .of-booking-details__intro,
    .of-booking-summary__intro {
        width: min(100%, 580px);
        margin: 0 auto;
        gap: 4px;
    }

    .of-booking-schedule__title,
    .of-booking-details__title,
    .of-booking-summary__title {
        margin: 0;
        color: var(--of-flow-brand-color, #0f3549);
        font-size: 13px;
        font-weight: 700;
        line-height: 18px;
        letter-spacing: 0.5px;
    }

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

    .of-booking-details__lead {
        max-width: none;
        margin: 0;
        font-size: 12px;
        line-height: 17px;
        letter-spacing: 0.3px;
    }

    .of-booking__content--schedule {
        gap: 14px;
    }

    .of-booking-schedule {
        display: grid;
        grid-template-columns: minmax(0, 330px) 104px;
        align-items: start;
        justify-content: space-between;
        gap: 36px;
        width: min(100%, 580px);
        padding: 18px 54px 22px;
        background: #ffffff;
        border-radius: 3px;
        box-sizing: border-box;
    }

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

    .of-booking-calendar {
        gap: 8px;
        padding: 0;
        background: transparent;
    }

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

    .of-booking-calendar__heading {
        grid-template-columns: minmax(0, 1fr) 76px;
        gap: 7px;
    }

    .of-booking-calendar__nav-btn {
        width: 24px;
        min-width: 24px;
        height: 28px;
        padding: 0;
        font-size: 25px;
        line-height: 1;
    }

    .of-booking-calendar__select {
        min-height: 30px;
        padding: 0 24px 0 9px;
        font-size: 11px;
        line-height: 15px;
        background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%;
        background-size: 5px 5px, 5px 5px;
    }

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

    .of-booking-calendar__weekdays span {
        font-size: 10px;
        line-height: 14px;
    }

    .of-booking-calendar__day {
        width: 24px;
        min-width: 24px;
        height: 24px;
        min-height: 24px;
        font-size: 11px;
        line-height: 15px;
        border-radius: 4px;
    }

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

    .of-booking-schedule__section-title {
        font-size: 12px;
        font-weight: 700;
        line-height: 16px;
    }

    .of-booking-schedule__hours {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        min-height: 0;
        margin: 0;
        overflow: visible;
    }

    .of-booking-schedule-item {
        width: 100%;
        min-width: 0;
        min-height: 30px;
        padding: 6px 10px;
        font-size: 12px;
        line-height: 16px;
        background: #ffffff;
        border-color: #d7dde1;
        border-radius: 4px;
    }

    .of-booking-schedule-item--selected {
        background: #d8eff1;
        border-color: #d8eff1;
    }

    .of-booking__actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: min(100%, 580px);
        margin: 14px auto 0;
        gap: 12px;
    }

    .of-booking__actions--schedule,
    .of-booking__actions--details,
    .of-booking__actions--summary {
        margin-top: 14px;
    }

    #of-booking-schedule-back-btn,
    .of-booking__actions--summary #of-booking-summary-back-btn,
    #of-booking-summary-back-btn {
        display: inline-flex;
    }

    .of-booking__actions .of-search-action,
    .of-booking__actions--details .of-search-action--primary,
    #of-booking-summary-confirm-btn,
    #of-booking-confirmation-back-btn {
        min-height: 38px;
        padding: 8px 17px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
        line-height: 16px;
    }

    .of-booking__actions .of-search-action--secondary {
        color: var(--of-flow-brand-color, #0f3549);
        background: #ffffff;
        border: 1px solid var(--of-flow-brand-color, #0f3549);
    }

    .of-booking__content--details,
    .of-booking__content--summary {
        width: min(100%, 620px);
        max-width: 620px;
        gap: 14px;
    }

    .of-booking[data-booking-state="ready"] .of-booking-stepper,
    .of-booking[data-booking-state="summary"] .of-booking-stepper {
        width: min(100%, 620px) !important;
    }

    .of-booking[data-booking-state="ready"] .of-booking-schedule__intro,
    .of-booking[data-booking-state="ready"] .of-booking-details__intro,
    .of-booking[data-booking-state="ready"] .of-booking__actions,
    .of-booking[data-booking-state="summary"] .of-booking-summary__intro,
    .of-booking[data-booking-state="summary"] .of-booking__actions {
        width: min(100%, 620px);
    }

    .of-booking-details__form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 20px;
        width: 100%;
    }

    .of-booking-details__section {
        display: grid;
        align-content: start;
        gap: 10px;
        padding: 18px 20px 20px;
        background: #ffffff;
        border: 1px solid #edf0f2;
        border-radius: 3px;
        box-sizing: border-box;
    }

    .of-booking-details__section--vehicle-services {
        grid-column: 1;
    }

    .of-booking-details__section--contact {
        grid-column: 2;
    }

    .of-booking-details__section-title {
        margin: 0 0 2px;
        font-size: 13px;
        font-weight: 700;
        line-height: 18px;
    }

    .of-booking .of-search-field__label,
    .of-booking-details__field-block > .of-search-field__label,
    .of-booking-details__readonly-block > .of-search-field__label {
        font-size: 10px;
        font-weight: 700;
        line-height: 14px;
    }

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

    .of-booking-details__section .of-search-input,
    .of-booking-details textarea.of-search-input {
        min-height: 34px;
        padding: 7px 36px 7px 10px !important;
        font-size: 11px;
        line-height: 16px;
    }

    .of-booking-details__readonly-block {
        display: grid;
        gap: 3px;
    }

    .of-booking-details__readonly-value {
        color: var(--of-flow-brand-color, #0f3549);
        font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif);
        font-size: 12px;
        font-weight: 700;
        line-height: 17px;
    }

    .of-booking-details__choice-group {
        display: grid;
        gap: 8px;
    }

    .of-booking-details__choice {
        min-height: 32px;
        padding: 0 10px;
        font-size: 11px;
        line-height: 16px;
    }

    .of-booking-details__choice-help {
        font-size: 10px;
        line-height: 14px;
    }

    .of-booking-details__textarea {
        min-height: 74px !important;
    }

    .of-booking-summary {
        display: grid;
        grid-template-columns: minmax(0, 1.08fr) minmax(230px, 0.92fr);
        gap: 16px;
        width: 100%;
    }

    .of-booking-summary__card,
    .of-booking-summary__card:first-child {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        gap: 12px;
        padding: 18px 20px 20px;
        background: #ffffff;
        border: 1px solid #edf0f2;
        border-radius: 3px;
        box-sizing: border-box;
    }

    .of-booking-summary__section-title,
    .of-booking-summary__label,
    .of-booking-summary__contact-row dt {
        color: #8393a0;
        font-size: 11px;
        font-weight: 500;
        line-height: 15px;
    }

    .of-booking-summary__section-title {
        color: var(--of-flow-brand-color, #0f3549);
        font-weight: 700;
    }

    .of-booking-summary__item {
        gap: 2px;
    }

    .of-booking-summary__value,
    .of-booking-summary__contact-row dd {
        color: var(--of-flow-brand-color, #0f3549);
        font-size: 12px;
        font-weight: 700;
        line-height: 17px;
    }

    .of-booking-summary__plate-badge {
        justify-self: start;
        min-height: 22px;
        padding: 3px 9px;
        color: var(--of-flow-brand-color, #0f3549);
        background: #eef4f5;
        border: 1px solid #d7dde1;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 700;
        line-height: 16px;
    }

    .of-booking-summary__contact-list {
        gap: 8px;
    }

    .of-booking-summary__contact-row {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 10px;
    }

    #of-booking-summary-confirm-btn {
        min-width: 214px;
    }

    .of-booking__content--confirmation {
        width: min(100%, 580px);
        max-width: 580px;
        gap: 22px;
        min-height: auto;
        padding: 0;
    }

    .of-booking[data-booking-state="confirmed"] .of-booking-stepper {
        width: min(100%, 580px) !important;
    }

    .of-booking-confirmation {
        display: grid;
        justify-items: center;
        gap: 20px;
        width: 100%;
        padding: 18px 0 4px;
        text-align: center;
    }

    .of-booking-confirmation__icon {
        width: 78px !important;
        height: 78px !important;
    }

    .of-booking-confirmation__title {
        max-width: 430px;
        margin: 0 auto;
        font-size: 14px;
        font-weight: 700;
        line-height: 20px;
        text-align: center;
    }

    .of-booking-confirmation__next {
        display: grid;
        justify-items: start;
        gap: 10px;
        width: min(100%, 380px);
        max-width: 380px;
        margin: 6px auto 0;
        padding: 18px 22px;
        text-align: left;
        background: #ffffff;
        border: 1px solid #d7dde1;
        border-radius: 3px;
        box-sizing: border-box;
    }

    .of-booking-confirmation__subtitle {
        font-size: 12px;
        line-height: 17px;
    }

    .of-booking-confirmation__text {
        font-size: 11px;
        line-height: 16px;
    }

    .of-booking__actions--confirmation {
        justify-content: center;
        width: min(100%, 580px);
        margin-top: 10px;
    }

    #of-booking-confirmation-back-btn {
        min-width: 92px;
    }
}

/* Pass 10.38: desktop booking modal containment and Figma alignment fixes. */
@media (min-width: 740px) {
    #of-booking-panel.of-booking[hidden] {
        display: none !important;
    }

    #of-booking-panel.of-booking {
        position: fixed !important;
        inset: 0 !important;
        z-index: 1000 !important;
        display: grid !important;
        grid-template-rows: 58px auto !important;
        align-content: center !important;
        justify-items: center !important;
        width: 100vw !important;
        max-width: none !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        padding: 34px 48px !important;
        color: var(--of-flow-brand-color, #0f3549) !important;
        background: rgba(0, 0, 0, 0.32) !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    #of-booking-panel.of-booking > .of-booking__header,
    #of-booking-panel.of-booking > .of-booking__body {
        width: min(100%, 820px) !important;
        max-width: 820px !important;
        box-sizing: border-box !important;
    }

    #of-booking-panel.of-booking > .of-booking__header {
        display: grid !important;
        grid-template-columns: 160px minmax(0, 1fr) 32px !important;
        align-items: center !important;
        min-height: 58px !important;
        height: 58px !important;
        padding: 0 24px !important;
        background: #ffffff !important;
        border: 1px solid #d7dde1 !important;
        border-bottom: 0 !important;
        border-radius: 4px 4px 0 0 !important;
    }

    #of-booking-panel.of-booking > .of-booking__body {
        display: grid !important;
        align-content: start !important;
        justify-items: center !important;
        gap: 16px !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 126px) !important;
        padding: 22px 58px 26px !important;
        background: #f3f3f1 !important;
        border: 1px solid #d7dde1 !important;
        border-top: 0 !important;
        border-radius: 0 0 4px 4px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    #of-booking-panel.of-booking > .of-booking__footer {
        display: none !important;
    }

    #of-booking-panel .of-booking__title {
        justify-self: start !important;
        width: 118px !important;
        height: 28px !important;
        color: transparent !important;
        font-size: 0 !important;
        line-height: 0 !important;
        text-align: left !important;
        background-image: url("/Images/ayvens-logo.svg") !important;
        background-repeat: no-repeat !important;
        background-position: left center !important;
        background-size: contain !important;
        overflow: hidden !important;
    }

    #of-booking-panel .of-booking__back,
    #of-booking-panel.of-booking[data-booking-state="confirmed"] .of-booking__back {
        visibility: visible !important;
        pointer-events: auto !important;
        grid-column: 3 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        display: inline-flex !important;
        width: 28px !important;
        height: 28px !important;
        color: #2f3033 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 999px !important;
    }

    #of-booking-panel .of-booking__back-icon {
        position: relative !important;
        width: 16px !important;
        height: 16px !important;
        background-color: transparent !important;
        clip-path: none !important;
    }

    #of-booking-panel .of-booking__back-icon::before,
    #of-booking-panel .of-booking__back-icon::after {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: 16px !important;
        height: 1.4px !important;
        background: currentColor !important;
        border-radius: 999px !important;
        transform-origin: center !important;
    }

    #of-booking-panel .of-booking__back-icon::before {
        transform: translate(-50%, -50%) rotate(45deg) !important;
    }

    #of-booking-panel .of-booking__back-icon::after {
        transform: translate(-50%, -50%) rotate(-45deg) !important;
    }

    #of-booking-panel .of-booking__header-spacer {
        display: none !important;
    }

    #of-booking-panel .of-booking-stepper {
        display: block !important;
        width: min(100%, 580px) !important;
        margin: 0 auto 4px !important;
        padding: 12px 22px 10px !important;
        background: #ffffff !important;
        border: 0 !important;
        border-radius: 3px !important;
        box-sizing: border-box !important;
    }

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

    #of-booking-panel .of-booking__content {
        justify-self: center !important;
        width: min(100%, 580px) !important;
        max-width: 580px !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    #of-booking-panel .of-booking__content--details,
    #of-booking-panel .of-booking__content--summary {
        width: min(100%, 620px) !important;
        max-width: 620px !important;
    }

    #of-booking-panel.of-booking[data-booking-state="ready"] .of-booking-stepper,
    #of-booking-panel.of-booking[data-booking-state="summary"] .of-booking-stepper {
        width: min(100%, 620px) !important;
    }

    #of-booking-panel.of-booking[data-booking-state="ready"] .of-booking-details__intro,
    #of-booking-panel.of-booking[data-booking-state="summary"] .of-booking-summary__intro,
    #of-booking-panel.of-booking[data-booking-state="ready"] .of-booking__actions,
    #of-booking-panel.of-booking[data-booking-state="summary"] .of-booking__actions {
        width: min(100%, 620px) !important;
    }

    #of-booking-panel .of-booking-schedule__intro,
    #of-booking-panel .of-booking-details__intro,
    #of-booking-panel .of-booking-summary__intro {
        width: min(100%, 580px) !important;
        margin: 0 auto !important;
        gap: 4px !important;
    }

    #of-booking-panel .of-booking-schedule__title,
    #of-booking-panel .of-booking-details__title,
    #of-booking-panel .of-booking-summary__title {
        margin: 0 !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 18px !important;
        letter-spacing: 0.5px !important;
    }

    #of-booking-panel .of-booking-schedule__lead {
        display: none !important;
    }

    #of-booking-panel .of-booking-schedule {
        display: grid !important;
        grid-template-columns: minmax(0, 330px) 104px !important;
        align-items: start !important;
        justify-content: space-between !important;
        gap: 36px !important;
        width: min(100%, 580px) !important;
        padding: 18px 54px 22px !important;
        background: #ffffff !important;
        border-radius: 3px !important;
        box-sizing: border-box !important;
    }

    #of-booking-panel .of-booking-details__form {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 20px !important;
        width: 100% !important;
    }

    #of-booking-panel .of-booking-details__section {
        padding: 18px 20px 20px !important;
        background: #ffffff !important;
        border: 1px solid #edf0f2 !important;
        border-radius: 3px !important;
        box-sizing: border-box !important;
    }

    #of-booking-panel .of-booking-details__section--vehicle-services {
        grid-column: 1 !important;
    }

    #of-booking-panel .of-booking-details__section--contact {
        grid-column: 2 !important;
    }

    #of-booking-panel .of-booking-summary {
        display: grid !important;
        grid-template-columns: minmax(0, 1.08fr) minmax(230px, 0.92fr) !important;
        gap: 16px !important;
        width: 100% !important;
    }

    #of-booking-panel .of-booking-summary__card,
    #of-booking-panel .of-booking-summary__card:first-child {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-content: start !important;
        gap: 12px !important;
        padding: 18px 20px 20px !important;
        background: #ffffff !important;
        border: 1px solid #edf0f2 !important;
        border-radius: 3px !important;
        box-sizing: border-box !important;
    }

    #of-booking-panel .of-booking__actions {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: min(100%, 580px) !important;
        margin: 14px auto 0 !important;
        gap: 12px !important;
    }

    #of-booking-panel .of-booking__actions--details,
    #of-booking-panel .of-booking__actions--summary {
        width: min(100%, 620px) !important;
    }

    #of-booking-panel #of-booking-schedule-back-btn,
    #of-booking-panel #of-booking-back-btn,
    #of-booking-panel #of-booking-summary-back-btn,
    #of-booking-panel .of-booking__actions--details .of-search-action--secondary,
    #of-booking-panel .of-booking__actions--summary .of-search-action--secondary {
        display: inline-flex !important;
    }

    #of-booking-panel #of-booking-schedule-continue-btn,
    #of-booking-panel #of-booking-continue-btn,
    #of-booking-panel #of-booking-summary-confirm-btn {
        margin-left: auto !important;
    }

    #of-booking-panel .of-booking__actions .of-search-action,
    #of-booking-panel .of-booking__actions--details .of-search-action--primary,
    #of-booking-panel #of-booking-summary-confirm-btn,
    #of-booking-panel #of-booking-confirmation-back-btn {
        min-height: 38px !important;
        padding: 8px 17px !important;
        border-radius: 999px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 16px !important;
    }

    #of-booking-panel .of-booking__actions .of-search-action--secondary {
        color: var(--of-flow-brand-color, #0f3549) !important;
        background: #ffffff !important;
        border: 1px solid var(--of-flow-brand-color, #0f3549) !important;
    }

    #of-booking-panel.of-booking[data-booking-state="confirmed"] .of-booking-stepper,
    #of-booking-panel .of-booking__content--confirmation,
    #of-booking-panel .of-booking__actions--confirmation {
        width: min(100%, 580px) !important;
    }

    #of-booking-panel .of-booking__content--confirmation {
        max-width: 580px !important;
        gap: 22px !important;
        min-height: auto !important;
        padding: 0 !important;
    }

    #of-booking-panel .of-booking-confirmation {
        display: grid !important;
        justify-items: center !important;
        gap: 20px !important;
        width: 100% !important;
        padding: 18px 0 4px !important;
        text-align: center !important;
    }

    #of-booking-panel .of-booking-confirmation__title {
        max-width: 430px !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    #of-booking-panel .of-booking-confirmation__next {
        width: min(100%, 380px) !important;
        max-width: 380px !important;
        margin: 6px auto 0 !important;
        text-align: left !important;
    }

    #of-booking-panel .of-booking__actions--confirmation {
        justify-content: center !important;
    }
}

/* Pass 10.39: desktop booking modal hard reset aligned with Figma. */
@media (min-width: 740px) {
    #of-booking-panel.of-booking {
        position: fixed !important;
        inset: 0 !important;
        z-index: 5000 !important;
        display: grid !important;
        grid-template-columns: minmax(0, min(900px, calc(100vw - 96px))) !important;
        grid-template-rows: 62px minmax(0, auto) !important;
        justify-content: center !important;
        align-content: center !important;
        width: 100vw !important;
        max-width: none !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #adadad !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

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

    #of-booking-panel .of-booking__header,
    #of-booking-panel .of-booking__body {
        grid-column: 1 !important;
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    #of-booking-panel .of-booking__header {
        grid-row: 1 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 38px !important;
        align-items: center !important;
        height: 62px !important;
        min-height: 62px !important;
        padding: 0 28px !important;
        background: #ffffff !important;
        border-radius: 3px 3px 0 0 !important;
        box-shadow: none !important;
    }

    #of-booking-panel .of-booking__title {
        grid-column: 1 !important;
        justify-self: start !important;
        width: 116px !important;
        height: 32px !important;
        min-width: 116px !important;
        color: transparent !important;
        font-size: 0 !important;
        line-height: 0 !important;
        text-align: left !important;
        background-image: url("/Images/ayvens-logo.svg") !important;
        background-repeat: no-repeat !important;
        background-position: left center !important;
        background-size: contain !important;
        overflow: hidden !important;
    }

    #of-booking-panel .of-booking__back {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        width: 32px !important;
        height: 32px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #2f3033 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 999px !important;
    }

    #of-booking-panel .of-booking__back-icon {
        position: relative !important;
        width: 18px !important;
        height: 18px !important;
        background: transparent !important;
        clip-path: none !important;
    }

    #of-booking-panel .of-booking__back-icon::before,
    #of-booking-panel .of-booking__back-icon::after {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: 18px !important;
        height: 1.5px !important;
        background: currentColor !important;
        border: 0 !important;
        border-radius: 999px !important;
        transform-origin: center !important;
    }

    #of-booking-panel .of-booking__back-icon::before {
        transform: translate(-50%, -50%) rotate(45deg) !important;
    }

    #of-booking-panel .of-booking__back-icon::after {
        transform: translate(-50%, -50%) rotate(-45deg) !important;
    }

    #of-booking-panel .of-booking__header-spacer {
        display: none !important;
    }

    #of-booking-panel .of-booking__body {
        grid-row: 2 !important;
        display: grid !important;
        justify-items: center !important;
        align-content: start !important;
        gap: 0 !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 142px) !important;
        padding: 28px 0 32px !important;
        background: #f3f3f1 !important;
        border-radius: 0 0 3px 3px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    #of-booking-panel .of-booking__body::-webkit-scrollbar {
        display: none !important;
    }

    #of-booking-panel .of-booking__footer {
        display: none !important;
    }

    #of-booking-panel .of-booking-stepper {
        display: block !important;
        width: 560px !important;
        max-width: calc(100% - 64px) !important;
        margin: 0 auto 22px !important;
        padding: 14px 24px 12px !important;
        background: #ffffff !important;
        border: 0 !important;
        border-radius: 3px !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

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

    #of-booking-panel .of-booking-stepper__list {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        counter-reset: booking-step !important;
    }

    #of-booking-panel .of-booking-stepper__item {
        position: relative !important;
        display: grid !important;
        justify-items: center !important;
        align-items: start !important;
        gap: 7px !important;
        min-width: 0 !important;
        color: #8b949b !important;
        font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif) !important;
        font-size: 10px !important;
        font-weight: 500 !important;
        line-height: 14px !important;
        text-align: center !important;
        counter-increment: booking-step !important;
    }

    #of-booking-panel .of-booking-stepper__item:not(:last-child)::after {
        content: "" !important;
        position: absolute !important;
        z-index: 0 !important;
        left: calc(50% + 15px) !important;
        right: calc(-50% + 15px) !important;
        top: 13px !important;
        height: 1px !important;
        background: #d7dde1 !important;
        border: 0 !important;
        transform: none !important;
    }

    #of-booking-panel.of-booking[data-booking-state="ready"] .of-booking-stepper__item--schedule::after,
    #of-booking-panel.of-booking[data-booking-state="summary"] .of-booking-stepper__item--schedule::after,
    #of-booking-panel.of-booking[data-booking-state="summary"] .of-booking-stepper__item--details::after,
    #of-booking-panel.of-booking[data-booking-state="confirmed"] .of-booking-stepper__item--schedule::after,
    #of-booking-panel.of-booking[data-booking-state="confirmed"] .of-booking-stepper__item--details::after,
    #of-booking-panel.of-booking[data-booking-state="confirmed"] .of-booking-stepper__item--summary::after {
        background: var(--of-flow-brand-color, #0f3549) !important;
    }

    #of-booking-panel .of-booking-stepper__dot {
        position: relative !important;
        z-index: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 26px !important;
        min-width: 26px !important;
        height: 26px !important;
        min-height: 26px !important;
        color: var(--of-flow-brand-color, #0f3549) !important;
        background: #ffffff !important;
        border: 1px solid var(--of-flow-brand-color, #0f3549) !important;
        border-radius: 999px !important;
        box-sizing: border-box !important;
    }

    #of-booking-panel .of-booking-stepper__dot::before {
        content: counter(booking-step) !important;
        display: block !important;
        color: currentColor !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        border: 0 !important;
        width: auto !important;
        height: auto !important;
        transform: none !important;
    }

    #of-booking-panel.of-booking[data-booking-state="schedule"] .of-booking-stepper__item--schedule,
    #of-booking-panel.of-booking[data-booking-state="ready"] .of-booking-stepper__item--details,
    #of-booking-panel.of-booking[data-booking-state="summary"] .of-booking-stepper__item--summary,
    #of-booking-panel.of-booking[data-booking-state="confirmed"] .of-booking-stepper__item--confirmation {
        color: var(--of-flow-brand-color, #0f3549) !important;
        font-weight: 700 !important;
    }

    #of-booking-panel.of-booking[data-booking-state="schedule"] .of-booking-stepper__item--schedule .of-booking-stepper__dot,
    #of-booking-panel.of-booking[data-booking-state="ready"] .of-booking-stepper__item--details .of-booking-stepper__dot,
    #of-booking-panel.of-booking[data-booking-state="summary"] .of-booking-stepper__item--summary .of-booking-stepper__dot,
    #of-booking-panel.of-booking[data-booking-state="confirmed"] .of-booking-stepper__item--confirmation .of-booking-stepper__dot {
        color: #ffffff !important;
        background: var(--of-flow-brand-color, #0f3549) !important;
        border-color: var(--of-flow-brand-color, #0f3549) !important;
    }

    #of-booking-panel.of-booking[data-booking-state="ready"] .of-booking-stepper__item--schedule .of-booking-stepper__dot,
    #of-booking-panel.of-booking[data-booking-state="summary"] .of-booking-stepper__item--schedule .of-booking-stepper__dot,
    #of-booking-panel.of-booking[data-booking-state="summary"] .of-booking-stepper__item--details .of-booking-stepper__dot,
    #of-booking-panel.of-booking[data-booking-state="confirmed"] .of-booking-stepper__item--schedule .of-booking-stepper__dot,
    #of-booking-panel.of-booking[data-booking-state="confirmed"] .of-booking-stepper__item--details .of-booking-stepper__dot,
    #of-booking-panel.of-booking[data-booking-state="confirmed"] .of-booking-stepper__item--summary .of-booking-stepper__dot {
        color: #ffffff !important;
        background: var(--of-flow-brand-color, #0f3549) !important;
        border-color: var(--of-flow-brand-color, #0f3549) !important;
    }

    #of-booking-panel.of-booking[data-booking-state="ready"] .of-booking-stepper__item--schedule .of-booking-stepper__dot::before,
    #of-booking-panel.of-booking[data-booking-state="summary"] .of-booking-stepper__item--schedule .of-booking-stepper__dot::before,
    #of-booking-panel.of-booking[data-booking-state="summary"] .of-booking-stepper__item--details .of-booking-stepper__dot::before,
    #of-booking-panel.of-booking[data-booking-state="confirmed"] .of-booking-stepper__item--schedule .of-booking-stepper__dot::before,
    #of-booking-panel.of-booking[data-booking-state="confirmed"] .of-booking-stepper__item--details .of-booking-stepper__dot::before,
    #of-booking-panel.of-booking[data-booking-state="confirmed"] .of-booking-stepper__item--summary .of-booking-stepper__dot::before {
        content: "" !important;
        width: 8px !important;
        height: 5px !important;
        border-left: 1.7px solid currentColor !important;
        border-bottom: 1.7px solid currentColor !important;
        transform: translateY(-1px) rotate(-45deg) !important;
    }

    #of-booking-panel .of-booking-stepper__label {
        display: block !important;
        min-width: 0 !important;
        color: inherit !important;
        white-space: nowrap !important;
    }

    #of-booking-panel .of-booking__content {
        width: 580px !important;
        max-width: calc(100% - 64px) !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    #of-booking-panel .of-booking-schedule__intro,
    #of-booking-panel .of-booking-details__intro,
    #of-booking-panel .of-booking-summary__intro {
        width: 580px !important;
        max-width: calc(100% - 64px) !important;
        margin: 0 auto 14px !important;
        gap: 4px !important;
    }

    #of-booking-panel .of-booking-schedule__title,
    #of-booking-panel .of-booking-details__title,
    #of-booking-panel .of-booking-summary__title {
        margin: 0 !important;
        color: var(--of-flow-brand-color, #0f3549) !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 18px !important;
        letter-spacing: 0.5px !important;
    }

    #of-booking-panel .of-booking-schedule__lead {
        display: none !important;
    }

    #of-booking-panel .of-booking-details__lead {
        margin: 0 !important;
        color: var(--of-flow-brand-color, #0f3549) !important;
        font-size: 12px !important;
        line-height: 17px !important;
        letter-spacing: 0.3px !important;
    }

    #of-booking-panel .of-booking__content--schedule {
        gap: 0 !important;
    }

    #of-booking-panel .of-booking-schedule {
        display: grid !important;
        grid-template-columns: minmax(0, 330px) 104px !important;
        align-items: start !important;
        justify-content: space-between !important;
        gap: 36px !important;
        width: 580px !important;
        max-width: 100% !important;
        padding: 18px 54px 22px !important;
        background: #ffffff !important;
        border: 0 !important;
        border-radius: 3px !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    #of-booking-panel .of-booking-calendar {
        gap: 8px !important;
        padding: 0 !important;
        background: transparent !important;
    }

    #of-booking-panel .of-booking-calendar__header {
        display: grid !important;
        grid-template-columns: 24px minmax(0, 1fr) 24px !important;
        gap: 10px !important;
        align-items: center !important;
    }

    #of-booking-panel .of-booking-calendar__heading {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 76px !important;
        gap: 7px !important;
        align-items: center !important;
    }

    #of-booking-panel .of-booking-calendar__nav-btn {
        width: 24px !important;
        min-width: 24px !important;
        height: 28px !important;
        padding: 0 !important;
        color: var(--of-flow-brand-color, #0f3549) !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        font-size: 25px !important;
        line-height: 1 !important;
    }

    #of-booking-panel .of-booking-calendar__select {
        min-height: 30px !important;
        padding: 0 24px 0 9px !important;
        color: #2f3033 !important;
        background-color: #ffffff !important;
        border: 1px solid #7f858a !important;
        border-radius: 4px !important;
        font-size: 11px !important;
        line-height: 15px !important;
    }

    #of-booking-panel .of-booking-calendar__weekdays,
    #of-booking-panel .of-booking-calendar__days {
        gap: 4px !important;
    }

    #of-booking-panel .of-booking-calendar__weekdays span {
        color: #62676b !important;
        font-size: 10px !important;
        font-weight: 400 !important;
        line-height: 14px !important;
    }

    #of-booking-panel .of-booking-calendar__day {
        width: 24px !important;
        min-width: 24px !important;
        height: 24px !important;
        min-height: 24px !important;
        color: #2f3033 !important;
        font-size: 11px !important;
        font-weight: 400 !important;
        line-height: 15px !important;
        border-radius: 4px !important;
    }

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

    #of-booking-panel .of-booking-calendar__day--available {
        color: #ffffff !important;
        font-weight: 700 !important;
        background: #008578 !important;
        cursor: pointer !important;
    }

    #of-booking-panel .of-booking-calendar__day--available::after {
        display: none !important;
    }

    #of-booking-panel .of-booking-calendar__day--selected,
    #of-booking-panel .of-booking-calendar__day--today.of-booking-calendar__day--selected {
        color: #ffffff !important;
        background: var(--of-flow-brand-color, #0f3549) !important;
        font-weight: 700 !important;
    }

    #of-booking-panel .of-booking-schedule__section {
        display: grid !important;
        gap: 8px !important;
    }

    #of-booking-panel .of-booking-schedule__section-title {
        margin: 0 !important;
        color: var(--of-flow-brand-color, #0f3549) !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 16px !important;
    }

    #of-booking-panel .of-booking-schedule__hours {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
        min-height: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    #of-booking-panel .of-booking-schedule-item {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 30px !important;
        padding: 6px 10px !important;
        color: var(--of-flow-brand-color, #0f3549) !important;
        background: #ffffff !important;
        border: 1px solid #d7dde1 !important;
        border-radius: 4px !important;
        font-size: 12px !important;
        line-height: 16px !important;
    }

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

    #of-booking-panel .of-booking__content--details,
    #of-booking-panel .of-booking__content--summary {
        width: 620px !important;
        max-width: calc(100% - 64px) !important;
    }

    #of-booking-panel.of-booking[data-booking-state="ready"] .of-booking-stepper,
    #of-booking-panel.of-booking[data-booking-state="summary"] .of-booking-stepper {
        width: 620px !important;
        max-width: calc(100% - 64px) !important;
    }

    #of-booking-panel.of-booking[data-booking-state="ready"] .of-booking-details__intro,
    #of-booking-panel.of-booking[data-booking-state="summary"] .of-booking-summary__intro {
        width: 620px !important;
        max-width: calc(100% - 64px) !important;
    }

    #of-booking-panel .of-booking-details__form {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 20px !important;
        width: 100% !important;
    }

    #of-booking-panel .of-booking-details__section {
        display: grid !important;
        align-content: start !important;
        gap: 10px !important;
        min-height: 280px !important;
        padding: 18px 20px 20px !important;
        background: #ffffff !important;
        border: 1px solid #edf0f2 !important;
        border-radius: 3px !important;
        box-sizing: border-box !important;
    }

    #of-booking-panel .of-booking-details__section--vehicle-services {
        grid-column: 1 !important;
    }

    #of-booking-panel .of-booking-details__section--contact {
        grid-column: 2 !important;
    }

    #of-booking-panel .of-booking-details__section-title {
        margin: 0 0 2px !important;
        color: var(--of-flow-brand-color, #0f3549) !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 18px !important;
    }

    #of-booking-panel .of-search-field__label,
    #of-booking-panel .of-booking-details__field-block > .of-search-field__label,
    #of-booking-panel .of-booking-details__readonly-block > .of-search-field__label {
        color: var(--of-flow-brand-color, #0f3549) !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        line-height: 14px !important;
    }

    #of-booking-panel .of-booking-details__split {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    #of-booking-panel .of-booking-details__section .of-search-input,
    #of-booking-panel .of-booking-details textarea.of-search-input {
        min-height: 34px !important;
        padding: 7px 10px !important;
        color: var(--of-flow-brand-color, #0f3549) !important;
        background: #ffffff !important;
        border: 1px solid #c9d0d5 !important;
        border-radius: 4px !important;
        font-size: 11px !important;
        line-height: 16px !important;
        box-shadow: none !important;
    }

    #of-booking-panel .of-booking-details__readonly-block {
        display: grid !important;
        gap: 3px !important;
    }

    #of-booking-panel .of-booking-details__readonly-value {
        color: var(--of-flow-brand-color, #0f3549) !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 17px !important;
    }

    #of-booking-panel .of-booking-details__choice-group {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    #of-booking-panel .of-booking-details__choice {
        display: flex !important;
        align-items: center !important;
        gap: 9px !important;
        min-height: 32px !important;
        padding: 0 10px !important;
        color: var(--of-flow-brand-color, #0f3549) !important;
        background: #ffffff !important;
        border: 1px solid #c9d0d5 !important;
        border-radius: 4px !important;
        font-size: 11px !important;
        line-height: 16px !important;
        box-sizing: border-box !important;
    }

    #of-booking-panel .of-booking-details__choice input[type="radio"] {
        width: 16px !important;
        height: 16px !important;
        margin: 0 !important;
    }

    #of-booking-panel .of-booking-details__choice-help {
        font-size: 10px !important;
        line-height: 14px !important;
    }

    #of-booking-panel .of-booking-details__textarea {
        min-height: 74px !important;
        resize: none !important;
    }

    #of-booking-panel .of-booking-summary {
        display: grid !important;
        grid-template-columns: minmax(0, 1.08fr) minmax(230px, 0.92fr) !important;
        gap: 16px !important;
        width: 100% !important;
    }

    #of-booking-panel .of-booking-summary__card,
    #of-booking-panel .of-booking-summary__card:first-child {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-content: start !important;
        gap: 12px !important;
        min-height: 292px !important;
        padding: 18px 20px 20px !important;
        background: #ffffff !important;
        border: 1px solid #edf0f2 !important;
        border-radius: 3px !important;
        box-sizing: border-box !important;
    }

    #of-booking-panel .of-booking-summary__section-title,
    #of-booking-panel .of-booking-summary__label,
    #of-booking-panel .of-booking-summary__contact-row dt {
        color: #8393a0 !important;
        font-size: 11px !important;
        font-weight: 500 !important;
        line-height: 15px !important;
    }

    #of-booking-panel .of-booking-summary__section-title {
        color: var(--of-flow-brand-color, #0f3549) !important;
        font-weight: 700 !important;
    }

    #of-booking-panel .of-booking-summary__item {
        display: grid !important;
        gap: 2px !important;
    }

    #of-booking-panel .of-booking-summary__value,
    #of-booking-panel .of-booking-summary__contact-row dd {
        color: var(--of-flow-brand-color, #0f3549) !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 17px !important;
    }

    #of-booking-panel .of-booking-summary__plate-badge {
        justify-self: start !important;
        min-height: 22px !important;
        padding: 3px 9px !important;
        color: var(--of-flow-brand-color, #0f3549) !important;
        background: #eef4f5 !important;
        border: 1px solid #d7dde1 !important;
        border-radius: 4px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 16px !important;
    }

    #of-booking-panel .of-booking-summary__contact-list {
        display: grid !important;
        gap: 8px !important;
        margin: 0 !important;
    }

    #of-booking-panel .of-booking-summary__contact-row {
        display: grid !important;
        grid-template-columns: 82px minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    #of-booking-panel .of-booking__actions {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 580px !important;
        max-width: calc(100% - 64px) !important;
        margin: 22px auto 0 !important;
        gap: 12px !important;
    }

    #of-booking-panel .of-booking__actions--details,
    #of-booking-panel .of-booking__actions--summary {
        width: 620px !important;
        max-width: calc(100% - 64px) !important;
    }

    #of-booking-panel #of-booking-schedule-back-btn,
    #of-booking-panel #of-booking-back-btn,
    #of-booking-panel #of-booking-summary-back-btn,
    #of-booking-panel .of-booking__actions--details .of-search-action--secondary,
    #of-booking-panel .of-booking__actions--summary .of-search-action--secondary {
        display: inline-flex !important;
    }

    #of-booking-panel #of-booking-schedule-continue-btn,
    #of-booking-panel #of-booking-continue-btn,
    #of-booking-panel #of-booking-summary-confirm-btn {
        margin-left: auto !important;
    }

    #of-booking-panel .of-booking__actions .of-search-action,
    #of-booking-panel .of-booking__actions--details .of-search-action--primary,
    #of-booking-panel #of-booking-summary-confirm-btn,
    #of-booking-panel #of-booking-confirmation-back-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 88px !important;
        min-height: 38px !important;
        padding: 8px 18px !important;
        border-radius: 999px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 16px !important;
        text-decoration: none !important;
    }

    #of-booking-panel .of-booking__actions .of-search-action--secondary {
        color: var(--of-flow-brand-color, #0f3549) !important;
        background: #ffffff !important;
        border: 1px solid var(--of-flow-brand-color, #0f3549) !important;
    }

    #of-booking-panel .of-booking__actions .of-search-action--primary,
    #of-booking-panel #of-booking-summary-confirm-btn,
    #of-booking-panel #of-booking-confirmation-back-btn {
        color: #ffffff !important;
        background: var(--of-flow-brand-color, #0f3549) !important;
        border: 1px solid var(--of-flow-brand-color, #0f3549) !important;
    }

    #of-booking-panel .of-booking__actions .of-search-action:disabled,
    #of-booking-panel .of-booking__actions .of-search-action[disabled] {
        color: #ffffff !important;
        background: #8399a3 !important;
        border-color: #8399a3 !important;
        opacity: 1 !important;
    }

    #of-booking-panel .of-booking__content--confirmation {
        width: 580px !important;
        max-width: calc(100% - 64px) !important;
        gap: 0 !important;
        min-height: auto !important;
        padding: 0 !important;
    }

    #of-booking-panel.of-booking[data-booking-state="confirmed"] .of-booking-stepper,
    #of-booking-panel .of-booking__actions--confirmation {
        width: 580px !important;
        max-width: calc(100% - 64px) !important;
    }

    #of-booking-panel .of-booking-confirmation {
        display: grid !important;
        justify-items: center !important;
        gap: 22px !important;
        width: 100% !important;
        padding: 18px 0 4px !important;
        text-align: center !important;
    }

    #of-booking-panel .of-booking-confirmation__icon {
        width: 78px !important;
        height: 78px !important;
    }

    #of-booking-panel .of-booking-confirmation__title {
        max-width: 430px !important;
        margin: 0 auto !important;
        color: var(--of-flow-brand-color, #0f3549) !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 20px !important;
        text-align: center !important;
    }

    #of-booking-panel .of-booking-confirmation__next {
        display: grid !important;
        justify-items: start !important;
        gap: 10px !important;
        width: 380px !important;
        max-width: 100% !important;
        margin: 6px auto 0 !important;
        padding: 18px 22px !important;
        text-align: left !important;
        background: #ffffff !important;
        border: 1px solid #d7dde1 !important;
        border-radius: 3px !important;
        box-sizing: border-box !important;
    }

    #of-booking-panel .of-booking-confirmation__subtitle {
        margin: 0 !important;
        color: var(--of-flow-brand-color, #0f3549) !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 17px !important;
    }

    #of-booking-panel .of-booking-confirmation__text {
        margin: 0 !important;
        color: var(--of-flow-brand-color, #0f3549) !important;
        font-size: 11px !important;
        line-height: 16px !important;
    }

    #of-booking-panel .of-booking__actions--confirmation {
        justify-content: center !important;
        margin-top: 18px !important;
    }
}

/* Pass 10.40: desktop booking base/background correction.
   The page/base behind the conversion journey is white; only the journey body is light grey. */
@media (min-width: 740px) {
    #of-home-ctn[data-current-stage="booking"] {
        position: fixed !important;
        inset: 0 !important;
        z-index: 4900 !important;
        width: 100vw !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        background: #ffffff !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    #of-home-ctn[data-current-stage="booking"] > :not(#of-booking-panel) {
        display: none !important;
    }

    #of-home-ctn[data-current-stage="booking"] #of-booking-panel.of-booking,
    #of-booking-panel.of-booking {
        position: fixed !important;
        inset: 0 !important;
        z-index: 5000 !important;
        display: grid !important;
        grid-template-columns: minmax(0, min(900px, calc(100vw - 96px))) !important;
        grid-template-rows: 62px minmax(0, auto) !important;
        justify-content: center !important;
        align-content: center !important;
        width: 100vw !important;
        max-width: none !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

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

    #of-booking-panel .of-booking__header {
        background: #ffffff !important;
        border: 1px solid #d7dde1 !important;
        border-bottom: 0 !important;
        border-radius: 3px 3px 0 0 !important;
    }

    #of-booking-panel .of-booking__body {
        background: #f3f3f1 !important;
        border: 1px solid #d7dde1 !important;
        border-top: 0 !important;
        border-radius: 0 0 3px 3px !important;
    }

    #of-booking-panel .of-booking__footer {
        display: none !important;
    }
}


/* Pass 10.61: booking calendar/slot states aligned with Ayvens Velocity guidance across all breakpoints. */
#of-booking-panel .of-booking-calendar__day--today:not(.of-booking-calendar__day--selected) {
    position: relative !important;
    color: var(--of-flow-brand-color, #0f3549) !important;
    background: transparent !important;
    font-weight: 500 !important;
}

#of-booking-panel .of-booking-calendar__day--today.of-booking-calendar__day--available:not(.of-booking-calendar__day--selected),
#of-booking-panel .of-booking-calendar__day--today.of-booking-calendar__day--unavailable:not(.of-booking-calendar__day--selected) {
    color: var(--of-flow-brand-color, #0f3549) !important;
    background: transparent !important;
}

#of-booking-panel .of-booking-calendar__day--today:not(.of-booking-calendar__day--selected)::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 1px !important;
    width: 4px !important;
    height: 4px !important;
    margin-left: -2px !important;
    border-radius: 50% !important;
    background: var(--of-flow-brand-color, #0f3549) !important;
}

#of-booking-panel .of-booking-calendar__day--today.of-booking-calendar__day--selected::after {
    display: none !important;
}

#of-booking-panel .of-booking-schedule-item {
    color: var(--of-flow-brand-color, #0f3549) !important;
    background: #ffffff !important;
    border: 1px solid var(--of-flow-brand-color, #0f3549) !important;
    font-weight: 500 !important;
}

#of-booking-panel .of-booking-schedule-item:hover,
#of-booking-panel .of-booking-schedule-item:focus-visible {
    color: var(--of-flow-brand-color, #0f3549) !important;
    background: #ffffff !important;
    border-color: var(--of-flow-brand-color, #0f3549) !important;
}

#of-booking-panel .of-booking-schedule-item--selected,
#of-booking-panel .of-booking-schedule-item[aria-pressed="true"] {
    color: #ffffff !important;
    background: var(--of-flow-brand-color, #0f3549) !important;
    border-color: var(--of-flow-brand-color, #0f3549) !important;
    font-weight: 500 !important;
}


/* Pass 10.62: calendar available days follow Ayvens guidance.
   Available days are white cards with #0f3549 outline; selected day is filled #0f3549. */
#of-booking-panel .of-booking-calendar__day--available:not(.of-booking-calendar__day--selected):not(.of-booking-calendar__day--today) {
    color: var(--of-flow-brand-color, #0f3549) !important;
    background: #ffffff !important;
    border: 1px solid var(--of-flow-brand-color, #0f3549) !important;
    font-weight: 500 !important;
    box-sizing: border-box !important;
}

#of-booking-panel .of-booking-calendar__day--available:not(.of-booking-calendar__day--selected):not(.of-booking-calendar__day--today)::after {
    display: none !important;
}

#of-booking-panel .of-booking-calendar__day--today.of-booking-calendar__day--available:not(.of-booking-calendar__day--selected) {
    color: var(--of-flow-brand-color, #0f3549) !important;
    background: #ffffff !important;
    border: 1px solid var(--of-flow-brand-color, #0f3549) !important;
    font-weight: 500 !important;
    box-sizing: border-box !important;
}

#of-booking-panel .of-booking-calendar__day--selected,
#of-booking-panel .of-booking-calendar__day--available.of-booking-calendar__day--selected,
#of-booking-panel .of-booking-calendar__day--today.of-booking-calendar__day--selected {
    color: #ffffff !important;
    background: var(--of-flow-brand-color, #0f3549) !important;
    border: 1px solid var(--of-flow-brand-color, #0f3549) !important;
    font-weight: 700 !important;
    box-sizing: border-box !important;
}


/* Pass 10.63: booking calendar days follow the base Ayvens Velocity date picker layout.
   Availability no longer uses filled/outlined day cards; selected day keeps the blue filled state. */
#of-booking-panel .of-booking-calendar__day {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    color: #2d2d2d !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 4px !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    box-sizing: border-box !important;
}

#of-booking-panel .of-booking-calendar__day--unavailable {
    color: #969b9f !important;
    background: transparent !important;
    border-color: transparent !important;
    font-weight: 400 !important;
}

#of-booking-panel .of-booking-calendar__day--available:not(.of-booking-calendar__day--selected) {
    color: #2d2d2d !important;
    background: transparent !important;
    border-color: transparent !important;
    font-weight: 400 !important;
}

#of-booking-panel .of-booking-calendar__day--available:not(.of-booking-calendar__day--selected)::after {
    display: none !important;
}

#of-booking-panel .of-booking-calendar__day--today:not(.of-booking-calendar__day--selected),
#of-booking-panel .of-booking-calendar__day--today.of-booking-calendar__day--available:not(.of-booking-calendar__day--selected),
#of-booking-panel .of-booking-calendar__day--today.of-booking-calendar__day--unavailable:not(.of-booking-calendar__day--selected) {
    color: var(--of-flow-brand-color, #0f3549) !important;
    background: transparent !important;
    border-color: transparent !important;
    font-weight: 500 !important;
}

#of-booking-panel .of-booking-calendar__day--today:not(.of-booking-calendar__day--selected)::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 4px !important;
    width: 4px !important;
    height: 4px !important;
    margin-left: -2px !important;
    border-radius: 50% !important;
    background: var(--of-flow-brand-color, #0f3549) !important;
}

#of-booking-panel .of-booking-calendar__day--selected,
#of-booking-panel .of-booking-calendar__day--available.of-booking-calendar__day--selected,
#of-booking-panel .of-booking-calendar__day--today.of-booking-calendar__day--selected {
    color: #ffffff !important;
    background: var(--of-flow-brand-color, #0f3549) !important;
    border-color: var(--of-flow-brand-color, #0f3549) !important;
    font-weight: 700 !important;
}

#of-booking-panel .of-booking-calendar__day--selected::after,
#of-booking-panel .of-booking-calendar__day--today.of-booking-calendar__day--selected::after {
    display: none !important;
}


/* Pass 10.64: desktop booking schedule visual alignment with Ayvens/Figma reference. */
@media (min-width: 740px) {
    #of-booking-panel .of-booking-stepper {
        background: transparent !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        box-shadow: none !important;
    }

    #of-booking-panel .of-booking-schedule__title {
        font-size: 16px !important;
        line-height: 22px !important;
        letter-spacing: 0.3px !important;
    }

    #of-booking-panel .of-booking-calendar {
        gap: 14px !important;
    }

    #of-booking-panel .of-booking-calendar__header {
        grid-template-columns: 32px minmax(0, 238px) 32px !important;
        gap: 20px !important;
        justify-content: center !important;
    }

    #of-booking-panel .of-booking-calendar__heading {
        grid-template-columns: minmax(0, 1fr) 84px !important;
        gap: 8px !important;
    }

    #of-booking-panel .of-booking-calendar__nav-btn {
        width: 32px !important;
        min-width: 32px !important;
        height: 40px !important;
        font-size: 31px !important;
        line-height: 1 !important;
    }

    #of-booking-panel .of-booking-calendar__select {
        min-height: 40px !important;
        height: 40px !important;
        padding: 0 34px 0 12px !important;
        color: #2d2d2d !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 20px !important;
    }

    #of-booking-panel .of-booking-calendar__select--year {
        min-width: 84px !important;
    }

    #of-booking-panel .of-booking-calendar__weekdays span {
        color: #757777 !important;
        font-size: 14px !important;
        line-height: 20px !important;
    }

    #of-booking-panel .of-booking-schedule__hours {
        gap: 12px !important;
    }

    #of-booking-panel .of-booking-schedule-item {
        min-height: 38px !important;
        color: var(--of-flow-brand-color, #0f3549) !important;
        background: #ffffff !important;
        border: 1px solid #d9ecec !important;
        border-radius: 4px !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        line-height: 20px !important;
    }

    #of-booking-panel .of-booking-schedule-item:hover,
    #of-booking-panel .of-booking-schedule-item:focus-visible {
        color: var(--of-flow-brand-color, #0f3549) !important;
        background: #ffffff !important;
        border-color: #d9ecec !important;
    }

    #of-booking-panel .of-booking-schedule-item--selected,
    #of-booking-panel .of-booking-schedule-item[aria-pressed="true"] {
        color: var(--of-flow-brand-color, #0f3549) !important;
        background: #d9ecec !important;
        border-color: #d9ecec !important;
        font-weight: 500 !important;
    }

    #of-booking-panel .of-booking__actions--schedule {
        align-items: center !important;
        justify-content: space-between !important;
        width: 580px !important;
        max-width: calc(100% - 64px) !important;
        margin: 24px auto 0 !important;
    }

    #of-booking-panel #of-booking-schedule-back-btn,
    #of-booking-panel #of-booking-schedule-continue-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        min-width: 126px !important;
        min-height: 48px !important;
        padding: 11px 24px !important;
        border-radius: 999px !important;
        font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif) !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 20px !important;
    }

    #of-booking-panel #of-booking-schedule-back-btn {
        color: var(--of-flow-brand-color, #0f3549) !important;
        background: #ffffff !important;
        border: 2px solid var(--of-flow-brand-color, #0f3549) !important;
    }

    #of-booking-panel #of-booking-schedule-back-btn::before {
        content: "" !important;
        display: block !important;
        width: 10px !important;
        height: 10px !important;
        border-left: 2px solid currentColor !important;
        border-bottom: 2px solid currentColor !important;
        transform: rotate(45deg) !important;
        box-sizing: border-box !important;
    }

    #of-booking-panel #of-booking-schedule-continue-btn {
        color: #ffffff !important;
        background: var(--of-flow-brand-color, #0f3549) !important;
        border: 2px solid var(--of-flow-brand-color, #0f3549) !important;
    }

    #of-booking-panel #of-booking-schedule-continue-btn::after {
        width: 12px !important;
        height: 12px !important;
        flex: 0 0 12px !important;
    }

    #of-booking-panel #of-booking-schedule-continue-btn:disabled,
    #of-booking-panel #of-booking-schedule-continue-btn[disabled] {
        color: #ffffff !important;
        background: #8399a3 !important;
        border-color: #8399a3 !important;
        opacity: 1 !important;
    }
}


/* Pass 10.79: standardize desktop booking action buttons and clean mobility option frames. */
@media (min-width: 740px) {
    /* Use the schedule step as the visual baseline for all booking CTA buttons. */
    #of-booking-panel .of-booking__actions {
        align-items: center !important;
    }

    #of-booking-panel .of-booking__actions .of-search-action,
    #of-booking-panel .of-booking__actions #of-booking-summary-confirm-btn,
    #of-booking-panel .of-booking__actions #of-booking-confirmation-back-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 52px !important;
        border-radius: 999px !important;
        font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif) !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 20px !important;
        letter-spacing: 0 !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
    }

    #of-booking-panel #of-booking-back-btn,
    #of-booking-panel #of-booking-schedule-back-btn,
    #of-booking-panel #of-booking-summary-back-btn {
        min-width: 140px !important;
        padding: 0 26px !important;
        gap: 12px !important;
    }

    #of-booking-panel #of-booking-continue-btn,
    #of-booking-panel #of-booking-schedule-continue-btn,
    #of-booking-panel #of-booking-summary-confirm-btn {
        min-width: 165px !important;
        padding: 0 28px !important;
        gap: 12px !important;
    }

    #of-booking-panel #of-booking-confirmation-back-btn {
        min-width: 140px !important;
        padding: 0 28px !important;
    }

    #of-booking-panel #of-booking-back-btn::before,
    #of-booking-panel #of-booking-schedule-back-btn::before,
    #of-booking-panel #of-booking-summary-back-btn::before {
        content: "" !important;
        width: 10px !important;
        height: 10px !important;
        flex: 0 0 10px !important;
        margin-top: -1px !important;
        border-left: 2px solid currentColor !important;
        border-bottom: 2px solid currentColor !important;
        transform: rotate(45deg) !important;
        box-sizing: border-box !important;
    }

    #of-booking-panel #of-booking-back-btn > span,
    #of-booking-panel #of-booking-schedule-back-btn > span,
    #of-booking-panel #of-booking-summary-back-btn > span {
        display: inline-block !important;
    }

    /* Extra mobility options must behave like plain radio options, without boxed frames. */
    #of-booking-panel .of-booking-details__mobility-options .of-booking-details__choice,
    #of-booking-panel .of-booking-details__mobility-options .of-booking-details__choice--stacked {
        min-height: auto !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        color: var(--of-flow-brand-color, #0f3549) !important;
    }

    #of-booking-panel .of-booking-details__mobility-options .of-booking-details__choice {
        display: flex !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    #of-booking-panel .of-booking-details__mobility-options .of-booking-details__choice:has(input:checked),
    #of-booking-panel .of-booking-details__mobility-options .of-booking-details__choice--stacked:has(input:checked) {
        background: transparent !important;
        border-color: transparent !important;
        color: var(--of-flow-brand-color, #0f3549) !important;
    }

    #of-booking-panel .of-booking-details__mobility-options .of-booking-details__choice > span:not(.of-booking-details__choice-help) {
        flex: 1 1 auto !important;
        padding-top: 1px !important;
    }

    #of-booking-panel .of-booking-details__mobility-options .of-booking-details__choice-help {
        margin-top: 6px !important;
        margin-left: 28px !important;
    }
}


/* Pass 10.80: fix desktop mobility option layout and summary confirm arrow. */
@media (min-width: 740px) {
    #of-booking-panel .of-booking-details__mobility-options {
        display: grid !important;
        gap: 12px !important;
        margin-top: 8px !important;
        padding-left: 24px !important;
    }

    #of-booking-panel .of-booking-details__mobility-options .of-booking-details__choice,
    #of-booking-panel .of-booking-details__mobility-options .of-booking-details__choice--stacked {
        display: grid !important;
        grid-template-columns: 16px minmax(0, 1fr) !important;
        align-items: start !important;
        justify-items: start !important;
        column-gap: 12px !important;
        row-gap: 6px !important;
        min-height: auto !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        color: var(--of-flow-brand-color, #0f3549) !important;
    }

    #of-booking-panel .of-booking-details__mobility-options .of-booking-details__choice > input[type="radio"],
    #of-booking-panel .of-booking-details__mobility-options .of-booking-details__choice--stacked > input[type="radio"] {
        grid-column: 1 !important;
        grid-row: 1 !important;
        margin: 0 !important;
    }

    #of-booking-panel .of-booking-details__mobility-options .of-booking-details__choice > span:not(.of-booking-details__choice-help):not(.of-booking-details__choice-main),
    #of-booking-panel .of-booking-details__mobility-options .of-booking-details__choice--stacked > span:not(.of-booking-details__choice-help):not(.of-booking-details__choice-main) {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: center !important;
        justify-self: start !important;
        padding-top: 0 !important;
        margin: 0 !important;
    }

    #of-booking-panel .of-booking-details__mobility-options .of-booking-details__choice-main {
        display: contents !important;
    }

    #of-booking-panel .of-booking-details__mobility-options .of-booking-details__choice-main > input[type="radio"] {
        grid-column: 1 !important;
        grid-row: 1 !important;
        margin: 0 !important;
    }

    #of-booking-panel .of-booking-details__mobility-options .of-booking-details__choice-main > span {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: center !important;
        justify-self: start !important;
        margin: 0 !important;
    }

    #of-booking-panel .of-booking-details__mobility-options .of-booking-details__choice-help {
        grid-column: 2 !important;
        grid-row: 2 !important;
        display: block !important;
        max-width: 255px !important;
        margin: 0 !important;
        color: #767b80 !important;
        text-align: left !important;
        padding-top: 0 !important;
    }

    #of-booking-panel #of-booking-summary-confirm-btn {
        gap: 12px !important;
    }

    #of-booking-panel #of-booking-summary-confirm-btn .of-search-action__arrow {
        display: inline-block !important;
        width: 10px !important;
        height: 10px !important;
        flex: 0 0 10px !important;
        margin-top: -1px !important;
        border-right: 2px solid currentColor !important;
        border-bottom: 2px solid currentColor !important;
        transform: rotate(-45deg) !important;
        box-sizing: border-box !important;
    }
}


/* Pass 10.81: keep mobility options hidden until user selects Sim. */
@media (min-width: 740px) {
    #of-booking-panel .of-booking-details__mobility-options[hidden] {
        display: none !important;
    }
}


/* Pass 10.85: booking journey is desktop-style from tablet size upward.
   Mobile keeps its own layout; tablet portrait, tablet landscape and desktop share the same booking composition. */
@media (min-width: 740px) {
    #of-booking-panel .of-booking-schedule {
        grid-template-columns: minmax(0, 330px) 104px !important;
        align-items: start !important;
        justify-content: space-between !important;
    }

    #of-booking-panel .of-booking-schedule__section {
        align-self: start !important;
    }

    #of-booking-panel .of-booking-schedule__hours {
        display: grid !important;
        grid-auto-rows: max-content !important;
        gap: 12px !important;
    }

    #of-booking-panel .of-booking-details__form {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        align-items: start !important;
    }

    #of-booking-panel .of-booking-details__section {
        align-self: start !important;
    }
}


/* Pass 10.86: tablet portrait booking centering and safe horizontal fit. */
@media (min-width: 740px) and (max-width: 900px) and (orientation: portrait) {
    #of-booking-panel.of-booking {
        padding: 24px !important;
    }

    #of-booking-panel.of-booking > .of-booking__header,
    #of-booking-panel.of-booking > .of-booking__body {
        width: min(100%, 640px) !important;
        max-width: 640px !important;
    }

    #of-booking-panel.of-booking > .of-booking__body {
        padding: 20px 24px 24px !important;
    }

    #of-booking-panel .of-booking-stepper,
    #of-booking-panel .of-booking__content,
    #of-booking-panel .of-booking-schedule__intro,
    #of-booking-panel .of-booking-details__intro,
    #of-booking-panel .of-booking-summary__intro,
    #of-booking-panel .of-booking__actions {
        width: 100% !important;
        max-width: 560px !important;
        justify-self: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    #of-booking-panel .of-booking__content--details,
    #of-booking-panel .of-booking__content--summary,
    #of-booking-panel.of-booking[data-booking-state="ready"] .of-booking-stepper,
    #of-booking-panel.of-booking[data-booking-state="summary"] .of-booking-stepper,
    #of-booking-panel.of-booking[data-booking-state="ready"] .of-booking-details__intro,
    #of-booking-panel.of-booking[data-booking-state="summary"] .of-booking-summary__intro,
    #of-booking-panel.of-booking[data-booking-state="ready"] .of-booking__actions,
    #of-booking-panel.of-booking[data-booking-state="summary"] .of-booking__actions {
        width: 100% !important;
        max-width: 560px !important;
        justify-self: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }
}


/* Pass 10.93: booking hour slots use the same green state across mobile, tablet and desktop. */
#of-booking-panel .of-booking-schedule-item {
    color: var(--of-flow-brand-color, #0f3549) !important;
    background: #ffffff !important;
    border: 1px solid #d9ecec !important;
    font-weight: 500 !important;
}

#of-booking-panel .of-booking-schedule-item:hover,
#of-booking-panel .of-booking-schedule-item:focus-visible {
    color: var(--of-flow-brand-color, #0f3549) !important;
    background: #ffffff !important;
    border-color: #d9ecec !important;
}

#of-booking-panel .of-booking-schedule-item--selected,
#of-booking-panel .of-booking-schedule-item[aria-pressed="true"] {
    color: var(--of-flow-brand-color, #0f3549) !important;
    background: #d9ecec !important;
    border-color: #d9ecec !important;
    font-weight: 500 !important;
}


/* Pass 10.94: screen-local legal footer alignment override.
   Keep footer text position identical to the shared footer: 24px from the left and right. */
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;
    padding-left: 24px !important;
    padding-right: 24px !important;
    text-align: left !important;
    box-sizing: border-box !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 {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}


/* Pass 10.95: canonical footer size for all non-desktop shells.
   Text position and footer height now match across map, detail, search and booking. */
@media (max-width: 1279px) {
    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 {
        flex: 0 0 var(--of-flow-footer-height, 52px) !important;
        min-height: var(--of-flow-footer-height, 52px) !important;
        height: var(--of-flow-footer-height, 52px) !important;
        max-height: var(--of-flow-footer-height, 52px) !important;
        padding: 5px 24px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        font-size: 11.5px !important;
        line-height: 14px !important;
        letter-spacing: 0.15px !important;
        text-align: left !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;
        margin: 0 !important;
        white-space: normal !important;
        overflow: hidden !important;
        overflow-wrap: anywhere !important;
        text-align: left !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 {
        flex-basis: var(--of-flow-footer-height, 46px) !important;
        min-height: var(--of-flow-footer-height, 46px) !important;
        height: var(--of-flow-footer-height, 46px) !important;
        max-height: var(--of-flow-footer-height, 46px) !important;
        padding: 3px 24px !important;
        font-size: 10.5px !important;
        line-height: 13px !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 {
        line-height: 13px !important;
    }
}


/* Pass 10.96: fixed non-desktop footer height and stable legal-copy alignment.
   Tablet was inheriting the 88px mobile-flow token; force the same compact footer everywhere below desktop. */
@media (max-width: 1279px) {
    body.of-body {
        --of-flow-footer-height: 52px !important;
    }

    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 {
        flex: 0 0 52px !important;
        min-height: 52px !important;
        height: 52px !important;
        max-height: 52px !important;
        padding: 5px 24px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
        color: #ffffff !important;
        background: var(--of-flow-brand-color, #0f3549) !important;
        font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif) !important;
        font-size: 11.5px !important;
        font-weight: 400 !important;
        line-height: 14px !important;
        letter-spacing: 0.15px !important;
        text-align: left !important;
        box-sizing: border-box !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;
        min-width: 0 !important;
        margin: 0 !important;
        color: inherit !important;
        text-align: left !important;
        white-space: normal !important;
        overflow: hidden !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        line-height: 14px !important;
        box-sizing: border-box !important;
    }

    body.of-body .of-flow-footer a,
    body.of-body .of-search-shell__footer a,
    body.of-body .of-results-shell__footer a,
    body.of-body .of-partner-detail__footer a,
    body.of-body .of-booking__footer a {
        color: inherit !important;
        text-decoration: none !important;
    }
}

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

    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 {
        flex-basis: 46px !important;
        min-height: 46px !important;
        height: 46px !important;
        max-height: 46px !important;
        padding: 3px 24px !important;
        font-size: 10.5px !important;
        line-height: 13px !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 {
        line-height: 13px !important;
    }
}


/* Pass 10.97: restore tablet footer to the responsive shell size.
   Tablet footer is 32px like the original responsive shell; mobile keeps the 52/46px mobile footer. */
@media (min-width: 480px) and (max-width: 1279px) {
    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 {
        flex: 0 0 var(--of-responsive-shell-footer-height, 32px) !important;
        min-height: var(--of-responsive-shell-footer-height, 32px) !important;
        height: var(--of-responsive-shell-footer-height, 32px) !important;
        max-height: var(--of-responsive-shell-footer-height, 32px) !important;
        padding: 6px 24px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
        color: #ffffff !important;
        background: var(--of-flow-brand-color, #0f3549) !important;
        font-size: 10.5px !important;
        line-height: 13px !important;
        letter-spacing: 0.15px !important;
        text-align: left !important;
        box-sizing: border-box !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;
        min-width: 0 !important;
        margin: 0 !important;
        color: inherit !important;
        text-align: left !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: clip !important;
        line-height: 13px !important;
        box-sizing: border-box !important;
    }

    body.of-body .of-flow-footer a,
    body.of-body .of-search-shell__footer a,
    body.of-body .of-results-shell__footer a,
    body.of-body .of-partner-detail__footer a,
    body.of-body .of-booking__footer a {
        color: inherit !important;
        text-decoration: none !important;
    }
}

/* Pass 11.11: desktop booking journey full-screen composition and validation UI alignment. */
@media (min-width: 1200px) {
    #of-booking-panel.of-booking {
        position: fixed !important;
        inset: 0 !important;
        z-index: 5000 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: 64px minmax(0, 1fr) !important;
        align-content: stretch !important;
        justify-content: stretch !important;
        justify-items: stretch !important;
        width: 100vw !important;
        max-width: none !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--of-flow-brand-color, #0f3549) !important;
        background: #ffffff !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    #of-booking-panel.of-booking > .of-booking__header,
    #of-booking-panel.of-booking > .of-booking__body {
        grid-column: 1 !important;
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    #of-booking-panel.of-booking > .of-booking__header {
        grid-row: 1 !important;
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) 44px !important;
        align-items: center !important;
        height: 64px !important;
        min-height: 64px !important;
        padding: 0 32px !important;
        background: #ffffff !important;
        border: 0 !important;
        border-bottom: 1px solid #d7dde1 !important;
        border-radius: 0 !important;
    }

    #of-booking-panel .of-booking__title {
        grid-column: 2 !important;
        justify-self: center !important;
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        color: var(--of-flow-brand-color, #0f3549) !important;
        font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif) !important;
        font-size: 20px !important;
        font-weight: 700 !important;
        line-height: 26px !important;
        letter-spacing: 0.4px !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        background: none !important;
    }

    #of-booking-panel .of-booking__back,
    #of-booking-panel.of-booking[data-booking-state="confirmed"] .of-booking__back {
        grid-column: 3 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        display: inline-flex !important;
        width: 32px !important;
        height: 32px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #2f3033 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 999px !important;
    }

    #of-booking-panel.of-booking > .of-booking__body {
        grid-row: 2 !important;
        display: grid !important;
        align-content: start !important;
        justify-items: center !important;
        gap: 0 !important;
        height: calc(100dvh - 64px) !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 36px clamp(40px, 6vw, 96px) 40px !important;
        background: #f3f3f1 !important;
        border: 0 !important;
        border-radius: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    #of-booking-panel .of-booking__footer {
        display: none !important;
    }

    #of-booking-panel .of-booking-stepper,
    #of-booking-panel .of-booking__content,
    #of-booking-panel .of-booking-schedule__intro,
    #of-booking-panel .of-booking-details__intro,
    #of-booking-panel .of-booking-summary__intro,
    #of-booking-panel .of-booking__actions {
        width: min(100%, 1120px) !important;
        max-width: 1120px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    #of-booking-panel .of-booking-stepper {
        margin-bottom: 26px !important;
        padding: 14px 28px 12px !important;
        background: #ffffff !important;
        border: 0 !important;
        border-radius: 4px !important;
    }

    #of-booking-panel .of-booking-schedule__intro,
    #of-booking-panel .of-booking-details__intro,
    #of-booking-panel .of-booking-summary__intro {
        justify-self: center !important;
        margin-bottom: 14px !important;
        text-align: left !important;
    }

    #of-booking-panel .of-booking-schedule__title,
    #of-booking-panel .of-booking-details__title,
    #of-booking-panel .of-booking-summary__title {
        margin: 0 !important;
        font-size: 22px !important;
        font-weight: 700 !important;
        line-height: 28px !important;
        letter-spacing: 0.4px !important;
        text-align: left !important;
    }

    #of-booking-panel .of-booking-schedule__lead,
    #of-booking-panel .of-booking-details__lead {
        display: block !important;
        max-width: 620px !important;
        margin: 6px 0 0 !important;
        font-size: 14px !important;
        line-height: 20px !important;
        text-align: left !important;
    }

    #of-booking-panel .of-booking__content {
        justify-self: center !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    #of-booking-panel .of-booking__content--schedule,
    #of-booking-panel .of-booking__content--details,
    #of-booking-panel .of-booking__content--summary,
    #of-booking-panel .of-booking__content--confirmation {
        width: min(100%, 1120px) !important;
        max-width: 1120px !important;
    }

    #of-booking-panel .of-booking-schedule {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(220px, 280px) !important;
        align-items: start !important;
        justify-content: stretch !important;
        gap: 56px !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 420px !important;
        padding: 34px 44px 38px !important;
        background: #ffffff !important;
        border: 0 !important;
        border-radius: 4px !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    #of-booking-panel .of-booking-calendar {
        width: 100% !important;
        max-width: 560px !important;
        gap: 14px !important;
    }

    #of-booking-panel .of-booking-calendar__header {
        grid-template-columns: 32px minmax(0, 1fr) 32px !important;
        gap: 14px !important;
    }

    #of-booking-panel .of-booking-calendar__heading {
        grid-template-columns: minmax(0, 1fr) 92px !important;
        gap: 10px !important;
    }

    #of-booking-panel .of-booking-calendar__select {
        min-height: 38px !important;
        padding: 0 32px 0 12px !important;
        font-size: 14px !important;
        line-height: 20px !important;
    }

    #of-booking-panel .of-booking-calendar__weekdays,
    #of-booking-panel .of-booking-calendar__days {
        gap: 8px !important;
    }

    #of-booking-panel .of-booking-calendar__weekdays span {
        font-size: 12px !important;
        line-height: 17px !important;
    }

    #of-booking-panel .of-booking-calendar__day {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        color: #2f3033 !important;
        background: #ffffff !important;
        border: 1px solid transparent !important;
        border-radius: 5px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 20px !important;
    }

    #of-booking-panel .of-booking-calendar__day--available {
        color: var(--of-flow-brand-color, #0f3549) !important;
        background: #ffffff !important;
        border-color: #d7dde1 !important;
        font-weight: 600 !important;
    }

    #of-booking-panel .of-booking-calendar__day--available:hover,
    #of-booking-panel .of-booking-calendar__day--available:focus-visible {
        border-color: var(--of-flow-brand-color, #0f3549) !important;
    }

    #of-booking-panel .of-booking-calendar__day--selected,
    #of-booking-panel .of-booking-calendar__day--today.of-booking-calendar__day--selected {
        color: #ffffff !important;
        background: var(--of-flow-brand-color, #0f3549) !important;
        border-color: var(--of-flow-brand-color, #0f3549) !important;
        font-weight: 700 !important;
    }

    #of-booking-panel .of-booking-calendar__day--available::after,
    #of-booking-panel .of-booking-calendar__day--today::after {
        display: none !important;
    }

    #of-booking-panel .of-booking-schedule__section {
        gap: 14px !important;
    }

    #of-booking-panel .of-booking-schedule__section-title {
        font-size: 16px !important;
        line-height: 22px !important;
    }

    #of-booking-panel .of-booking-schedule__hours {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        overflow: visible !important;
    }

    #of-booking-panel .of-booking-schedule-item {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 38px !important;
        padding: 8px 12px !important;
        color: var(--of-flow-brand-color, #0f3549) !important;
        background: #ffffff !important;
        border: 1px solid #d7dde1 !important;
        border-radius: 5px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 20px !important;
    }

    #of-booking-panel .of-booking-schedule-item:hover,
    #of-booking-panel .of-booking-schedule-item:focus-visible {
        color: var(--of-flow-brand-color, #0f3549) !important;
        background: #ffffff !important;
        border-color: var(--of-flow-brand-color, #0f3549) !important;
    }

    #of-booking-panel .of-booking-schedule-item--selected,
    #of-booking-panel .of-booking-schedule-item[aria-pressed="true"] {
        color: #ffffff !important;
        background: var(--of-flow-brand-color, #0f3549) !important;
        border-color: var(--of-flow-brand-color, #0f3549) !important;
        font-weight: 700 !important;
    }

    #of-booking-panel .of-booking-details__form,
    #of-booking-panel .of-booking-summary {
        width: 100% !important;
        gap: 24px !important;
    }

    #of-booking-panel .of-booking-details__form {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        align-items: stretch !important;
    }

    #of-booking-panel .of-booking-details__section,
    #of-booking-panel .of-booking-summary__card,
    #of-booking-panel .of-booking-summary__card:first-child {
        min-height: 0 !important;
        padding: 28px 32px 30px !important;
        background: #ffffff !important;
        border: 0 !important;
        border-radius: 4px !important;
        box-sizing: border-box !important;
    }

    #of-booking-panel .of-booking-details__plate-field,
    #of-booking-panel .of-booking-details__readonly-block {
        display: none !important;
    }

    #of-booking-panel .of-booking-details__section--vehicle-services > .of-booking-details__split {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #of-booking-panel .of-booking-summary {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr) !important;
    }

    #of-booking-panel .of-booking__actions {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-top: 24px !important;
        gap: 16px !important;
    }

    #of-booking-panel .of-booking__actions--details,
    #of-booking-panel .of-booking__actions--summary {
        width: min(100%, 1120px) !important;
        max-width: 1120px !important;
    }
}

/* Pass 11.11.1: desktop booking journey uses full useful width,
   stepper without white card, greener hour slots, and denser schedule height. */
@media (min-width: 1200px) {
    #of-booking-panel.of-booking > .of-booking__body {
        padding: 24px 32px 28px !important;
    }

    #of-booking-panel .of-booking-stepper,
    #of-booking-panel .of-booking__content,
    #of-booking-panel .of-booking-schedule__intro,
    #of-booking-panel .of-booking-details__intro,
    #of-booking-panel .of-booking-summary__intro,
    #of-booking-panel .of-booking__actions {
        width: 100% !important;
        max-width: none !important;
    }

    #of-booking-panel .of-booking-stepper {
        margin-bottom: 18px !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    #of-booking-panel .of-booking-schedule__intro,
    #of-booking-panel .of-booking-details__intro,
    #of-booking-panel .of-booking-summary__intro {
        margin-bottom: 18px !important;
    }

    #of-booking-panel .of-booking__content--schedule,
    #of-booking-panel .of-booking__content--details,
    #of-booking-panel .of-booking__content--summary,
    #of-booking-panel .of-booking__content--confirmation {
        width: 100% !important;
        max-width: none !important;
    }

    #of-booking-panel .of-booking-schedule {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 320px) !important;
        gap: 32px !important;
        min-height: 0 !important;
        padding: 28px 32px 24px !important;
    }

    #of-booking-panel .of-booking-calendar {
        max-width: none !important;
        gap: 12px !important;
    }

    #of-booking-panel .of-booking-calendar__weekdays,
    #of-booking-panel .of-booking-calendar__days {
        gap: 6px !important;
    }

    #of-booking-panel .of-booking-schedule__section {
        align-self: start !important;
        gap: 12px !important;
    }

    #of-booking-panel .of-booking-schedule__hours {
        align-content: start !important;
        gap: 10px !important;
    }

    #of-booking-panel .of-booking-schedule-item {
        min-height: 40px !important;
        color: #00843d !important;
        background: #ffffff !important;
        border: 1px solid #00843d !important;
        font-weight: 600 !important;
    }

    #of-booking-panel .of-booking-schedule-item:hover,
    #of-booking-panel .of-booking-schedule-item:focus-visible {
        color: #00843d !important;
        background: #eef8f2 !important;
        border-color: #00843d !important;
    }

    #of-booking-panel .of-booking-schedule-item--selected,
    #of-booking-panel .of-booking-schedule-item[aria-pressed="true"] {
        color: #ffffff !important;
        background: #00843d !important;
        border-color: #00843d !important;
        font-weight: 700 !important;
    }

    #of-booking-panel .of-booking__actions--schedule,
    #of-booking-panel .of-booking__actions--details,
    #of-booking-panel .of-booking__actions--summary,
    #of-booking-panel .of-booking__actions--confirmation {
        margin-top: 18px !important;
    }
}

/* Pass 11.11.6: restore the centred desktop schedule composition,
   extend only the grey shell to the viewport edges, and use the canonical soft green for hour slots. */
#of-booking-panel.of-booking[hidden],
#of-booking-panel.of-booking[aria-hidden="true"] {
    display: none !important;
}

@media (min-width: 1200px) {
    body.of-body:has(#of-home-ctn[data-current-stage="booking"]) {
        background: #f3f3f1 !important;
    }

    body.of-body #of-home-ctn:not([data-current-stage="booking"]) #of-booking-panel.of-booking,
    body.of-body #of-home-ctn:not([data-current-stage="booking"]) #of-booking-panel.of-booking[aria-hidden="true"] {
        display: none !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] {
        background: #f3f3f1 !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] > #of-booking-panel.of-booking {
        background: #ffffff !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] > #of-booking-panel.of-booking::before {
        content: "";
        position: fixed;
        left: 0;
        right: 0;
        top: 64px;
        bottom: 0;
        z-index: 0;
        background: #f3f3f1;
        pointer-events: none;
    }

    body.of-body #of-booking-panel.of-booking > .of-booking__header {
        position: relative !important;
        z-index: 2 !important;
        width: 100vw !important;
        max-width: none !important;
        padding-left: 32px !important;
        padding-right: 12px !important;
        background: #ffffff !important;
    }

    body.of-body #of-booking-panel .of-booking__back,
    body.of-body #of-booking-panel.of-booking[data-booking-state="confirmed"] .of-booking__back {
        justify-self: end !important;
        margin-right: 0 !important;
    }

    body.of-body #of-booking-panel.of-booking > .of-booking__body {
        position: relative !important;
        z-index: 1 !important;
        justify-items: center !important;
        padding: 24px clamp(24px, 4vw, 56px) 28px !important;
        background: transparent !important;
        overflow-x: hidden !important;
    }

    body.of-body #of-booking-panel .of-booking-stepper,
    body.of-body #of-booking-panel .of-booking-schedule__intro,
    body.of-body #of-booking-panel .of-booking__content--schedule,
    body.of-body #of-booking-panel .of-booking__actions--schedule {
        justify-self: center !important;
        width: min(100%, 920px) !important;
        max-width: 920px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    body.of-body #of-booking-panel .of-booking-stepper {
        margin-bottom: 22px !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    body.of-body #of-booking-panel .of-booking-schedule__intro {
        margin-bottom: 18px !important;
        text-align: left !important;
    }

    body.of-body #of-booking-panel .of-booking-schedule {
        display: grid !important;
        grid-template-columns: minmax(0, 430px) minmax(110px, 130px) !important;
        justify-content: center !important;
        align-items: start !important;
        gap: 88px !important;
        width: 100% !important;
        min-height: 0 !important;
        padding: 28px 44px 32px !important;
        background: #ffffff !important;
        border: 0 !important;
        border-radius: 4px !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    body.of-body #of-booking-panel .of-booking-calendar {
        width: 100% !important;
        max-width: 430px !important;
        gap: 12px !important;
        justify-self: start !important;
    }

    body.of-body #of-booking-panel .of-booking-calendar__header {
        grid-template-columns: 32px minmax(0, 1fr) 32px !important;
        gap: 12px !important;
    }

    body.of-body #of-booking-panel .of-booking-calendar__heading {
        grid-template-columns: minmax(0, 1fr) 92px !important;
        gap: 10px !important;
    }

    body.of-body #of-booking-panel .of-booking-calendar__select {
        min-height: 38px !important;
        padding: 0 32px 0 12px !important;
        font-size: 14px !important;
        line-height: 20px !important;
    }

    body.of-body #of-booking-panel .of-booking-calendar__weekdays,
    body.of-body #of-booking-panel .of-booking-calendar__days {
        gap: 8px !important;
    }

    body.of-body #of-booking-panel .of-booking-calendar__day {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        border-radius: 5px !important;
    }

    body.of-body #of-booking-panel .of-booking-schedule__section {
        justify-self: stretch !important;
        align-self: start !important;
        gap: 12px !important;
    }

    body.of-body #of-booking-panel .of-booking-schedule__hours {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-content: start !important;
        gap: 10px !important;
        width: 100% !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    body.of-body #of-booking-panel .of-booking-schedule-item {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 38px !important;
        padding: 8px 12px !important;
        color: var(--of-flow-brand-color, #0f3549) !important;
        background: #ffffff !important;
        border: 1px solid #d9ecec !important;
        border-radius: 5px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 20px !important;
    }

    body.of-body #of-booking-panel .of-booking-schedule-item:hover,
    body.of-body #of-booking-panel .of-booking-schedule-item:focus-visible {
        color: var(--of-flow-brand-color, #0f3549) !important;
        background: #ffffff !important;
        border-color: #d9ecec !important;
    }

    body.of-body #of-booking-panel .of-booking-schedule-item--selected,
    body.of-body #of-booking-panel .of-booking-schedule-item[aria-pressed="true"] {
        color: var(--of-flow-brand-color, #0f3549) !important;
        background: #d9ecec !important;
        border-color: #d9ecec !important;
        font-weight: 600 !important;
    }

    body.of-body #of-booking-panel .of-booking__actions--schedule {
        margin-top: 18px !important;
    }
}

/* Pass 11.11.7: desktop booking header final alignment fix. */
@media (min-width: 1200px) {
    body.of-body #of-booking-panel.of-booking > .of-booking__header {
        position: relative !important;
        display: block !important;
        width: 100vw !important;
        max-width: none !important;
        min-width: 100vw !important;
        padding: 0 56px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    body.of-body #of-booking-panel .of-booking__title {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        justify-self: auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100vw - 160px) !important;
        height: auto !important;
        color: var(--of-flow-brand-color, #0f3549) !important;
        font-size: 20px !important;
        line-height: 26px !important;
        font-weight: 700 !important;
        letter-spacing: 0.4px !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        background: none !important;
    }

    body.of-body #of-booking-panel .of-booking__back,
    body.of-body #of-booking-panel.of-booking[data-booking-state="confirmed"] .of-booking__back {
        position: absolute !important;
        top: 50% !important;
        right: 12px !important;
        transform: translateY(-50%) !important;
        z-index: 3 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 32px !important;
        margin: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    body.of-body #of-booking-panel .of-booking__back-icon {
        width: 18px !important;
        height: 18px !important;
    }

    body.of-body #of-booking-panel .of-booking__back-icon::before,
    body.of-body #of-booking-panel .of-booking__back-icon::after {
        width: 18px !important;
        height: 1.6px !important;
    }
}

/* Pass 11.11.8: desktop booking hour slots use the same blue state as selected days. */
@media (min-width: 1200px) {
    body.of-body #of-booking-panel .of-booking-schedule-item {
        color: var(--of-flow-brand-color, #0f3549) !important;
        background: #ffffff !important;
        border: 1px solid var(--of-flow-brand-color, #0f3549) !important;
        font-weight: 600 !important;
    }

    body.of-body #of-booking-panel .of-booking-schedule-item:hover,
    body.of-body #of-booking-panel .of-booking-schedule-item:focus-visible {
        color: var(--of-flow-brand-color, #0f3549) !important;
        background: #ffffff !important;
        border-color: var(--of-flow-brand-color, #0f3549) !important;
    }

    body.of-body #of-booking-panel .of-booking-schedule-item--selected,
    body.of-body #of-booking-panel .of-booking-schedule-item[aria-pressed="true"] {
        color: #ffffff !important;
        background: var(--of-flow-brand-color, #0f3549) !important;
        border-color: var(--of-flow-brand-color, #0f3549) !important;
        font-weight: 700 !important;
    }
}

/* Pass 11.13: desktop booking header viewport alignment and details intro alignment. */
@media (min-width: 1200px) {
    body.of-body #of-home-ctn[data-current-stage="booking"] > #of-booking-panel.of-booking:not([hidden]) > .of-booking__header {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        z-index: 20 !important;
        display: block !important;
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: none !important;
        height: 64px !important;
        min-height: 64px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        border: 0 !important;
        border-bottom: 1px solid #d7dde1 !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__title {
        position: absolute !important;
        left: 50vw !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100vw - 128px) !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--of-flow-brand-color, #0f3549) !important;
        font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif) !important;
        font-size: 20px !important;
        font-weight: 700 !important;
        line-height: 26px !important;
        letter-spacing: 0.4px !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        background: none !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__back,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel.of-booking[data-booking-state="confirmed"] .of-booking__back {
        position: fixed !important;
        right: 12px !important;
        top: 32px !important;
        z-index: 21 !important;
        transform: translateY(-50%) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 32px !important;
        margin: 0 !important;
        padding: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #2f3033 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 999px !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__back-icon {
        width: 18px !important;
        height: 18px !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__back-icon::before,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__back-icon::after {
        width: 18px !important;
        height: 1.6px !important;
    }

    body.of-body #of-booking-panel.of-booking[data-booking-state="ready"] .of-booking-details__intro {
        justify-self: center !important;
        width: min(100%, 866px) !important;
        max-width: 866px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    body.of-body #of-booking-panel.of-booking[data-booking-state="ready"] .of-booking-details__title,
    body.of-body #of-booking-panel.of-booking[data-booking-state="ready"] .of-booking-details__lead {
        text-align: left !important;
    }
}

/* Pass 11.17: mobile/tablet booking readability and parity with desktop details rules. */
@media (max-width: 739px) {
    body.of-body #of-booking-panel .of-booking__title {
        font-size: 19px !important;
        line-height: 24px !important;
        letter-spacing: 0.3px !important;
    }

    body.of-body #of-booking-panel .of-booking-schedule__title,
    body.of-body #of-booking-panel .of-booking-details__title,
    body.of-body #of-booking-panel .of-booking-summary__title,
    body.of-body #of-booking-panel .of-booking-confirmation__title {
        font-size: 18px !important;
        line-height: 24px !important;
        letter-spacing: 0.3px !important;
    }

    body.of-body #of-booking-panel .of-booking-schedule__section-title {
        font-size: 15px !important;
        line-height: 20px !important;
    }

    body.of-body #of-booking-panel .of-booking-calendar__select {
        font-size: 12px !important;
        line-height: 16px !important;
    }

    body.of-body #of-booking-panel .of-booking-calendar__weekdays span {
        font-size: 11px !important;
        line-height: 15px !important;
    }

    body.of-body #of-booking-panel .of-booking-calendar__day {
        font-size: 14px !important;
        line-height: 18px !important;
    }

    body.of-body #of-booking-panel .of-booking-schedule__lead {
        display: none !important;
    }

    body.of-body #of-booking-panel .of-booking-schedule-item {
        color: var(--of-flow-brand-color, #0f3549) !important;
        background: #ffffff !important;
        border: 1px solid var(--of-flow-brand-color, #0f3549) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 18px !important;
    }

    body.of-body #of-booking-panel .of-booking-schedule-item:hover,
    body.of-body #of-booking-panel .of-booking-schedule-item:focus-visible {
        color: var(--of-flow-brand-color, #0f3549) !important;
        background: #ffffff !important;
        border-color: var(--of-flow-brand-color, #0f3549) !important;
    }

    body.of-body #of-booking-panel .of-booking-schedule-item--selected,
    body.of-body #of-booking-panel .of-booking-schedule-item[aria-pressed="true"] {
        color: #ffffff !important;
        background: var(--of-flow-brand-color, #0f3549) !important;
        border-color: var(--of-flow-brand-color, #0f3549) !important;
        font-weight: 700 !important;
    }

    body.of-body #of-booking-panel .of-booking-calendar__day--today:not(.of-booking-calendar__day--selected)::after {
        bottom: 0 !important;
    }
}

@media (max-width: 1199px) {
    body.of-body #of-booking-panel .of-booking-details__plate-field,
    body.of-body #of-booking-panel .of-booking-details__readonly-block {
        display: none !important;
    }

    body.of-body #of-booking-panel .of-booking-details__section--vehicle-services > .of-booking-details__split {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.of-body #of-booking-panel .of-booking-calendar__day--today:not(.of-booking-calendar__day--selected)::after {
        bottom: 0 !important;
    }

    body.of-body #of-booking-panel .of-booking-schedule-item {
        color: var(--of-flow-brand-color, #0f3549) !important;
        background: #ffffff !important;
        border: 1px solid var(--of-flow-brand-color, #0f3549) !important;
    }

    body.of-body #of-booking-panel .of-booking-schedule-item:hover,
    body.of-body #of-booking-panel .of-booking-schedule-item:focus-visible {
        color: var(--of-flow-brand-color, #0f3549) !important;
        background: #ffffff !important;
        border-color: var(--of-flow-brand-color, #0f3549) !important;
    }

    body.of-body #of-booking-panel .of-booking-schedule-item--selected,
    body.of-body #of-booking-panel .of-booking-schedule-item[aria-pressed="true"] {
        color: #ffffff !important;
        background: var(--of-flow-brand-color, #0f3549) !important;
        border-color: var(--of-flow-brand-color, #0f3549) !important;
    }
}

@media (min-width: 740px) and (max-width: 1199px) {
    body.of-body #of-booking-panel .of-booking__title {
        font-size: 20px !important;
        line-height: 26px !important;
        letter-spacing: 0.3px !important;
    }

    body.of-body #of-booking-panel .of-booking-schedule__title,
    body.of-body #of-booking-panel .of-booking-details__title,
    body.of-body #of-booking-panel .of-booking-summary__title,
    body.of-body #of-booking-panel .of-booking-confirmation__title {
        font-size: 20px !important;
        line-height: 27px !important;
        letter-spacing: 0.35px !important;
    }

    body.of-body #of-booking-panel .of-booking-schedule__section-title {
        font-size: 16px !important;
        line-height: 22px !important;
    }

    body.of-body #of-booking-panel .of-booking-schedule-item {
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 20px !important;
    }
}

/* Pass 11.18: mobile booking header height restored; service title only gets a small font bump. */
@media (max-width: 479.98px) {
    body.of-body #of-booking-panel.of-booking {
        grid-template-rows: var(--of-flow-header-height, 60px) minmax(0, 1fr) var(--of-flow-footer-height, 52px) !important;
    }

    body.of-body #of-booking-panel .of-booking__header {
        grid-template-columns: 32px minmax(0, 1fr) 32px !important;
        min-height: var(--of-flow-header-height, 60px) !important;
        height: var(--of-flow-header-height, 60px) !important;
        max-height: var(--of-flow-header-height, 60px) !important;
        padding: 0 18px !important;
        box-sizing: border-box !important;
    }

    body.of-body #of-booking-panel .of-booking__title {
        font-size: var(--of-flow-mobile-header-title-size, 18px) !important;
        line-height: var(--of-flow-mobile-header-title-line-height, 23px) !important;
        letter-spacing: var(--of-flow-mobile-header-title-letter-spacing, 0.3px) !important;
    }

    body.of-body #of-booking-panel .of-booking__back,
    body.of-body #of-booking-panel .of-booking__header-spacer {
        width: 28px !important;
        height: 28px !important;
    }
}

/* Pass 11.19: tablet booking shell matches desktop full-width journey. */
@media (min-width: 740px) and (max-width: 1199px) {
    body.of-body:has(#of-home-ctn[data-current-stage="booking"]) {
        background: #f3f3f1 !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] {
        position: fixed !important;
        inset: 0 !important;
        z-index: 4900 !important;
        width: 100vw !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        padding: 0 !important;
        background: #f3f3f1 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] > :not(#of-booking-panel) {
        display: none !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] > #of-booking-panel.of-booking:not([hidden]) {
        position: fixed !important;
        inset: 0 !important;
        z-index: 5000 !important;
        display: grid !important;
        grid-template-columns: 100% !important;
        grid-template-rows: 64px minmax(0, 1fr) !important;
        justify-items: stretch !important;
        align-content: stretch !important;
        width: 100vw !important;
        max-width: none !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] > #of-booking-panel.of-booking:not([hidden])::before {
        content: "";
        position: fixed;
        left: 0;
        right: 0;
        top: 64px;
        bottom: 0;
        z-index: 0;
        background: #f3f3f1;
        pointer-events: none;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] > #of-booking-panel.of-booking:not([hidden]) > .of-booking__header {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        z-index: 20 !important;
        display: block !important;
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: none !important;
        height: 64px !important;
        min-height: 64px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        border: 0 !important;
        border-bottom: 1px solid #d7dde1 !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__title {
        position: absolute !important;
        left: 50vw !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100vw - 128px) !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--of-flow-brand-color, #0f3549) !important;
        font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif) !important;
        font-size: 20px !important;
        font-weight: 700 !important;
        line-height: 26px !important;
        letter-spacing: 0.4px !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        background: none !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__back,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel.of-booking[data-booking-state="confirmed"] .of-booking__back {
        position: fixed !important;
        right: 12px !important;
        top: 32px !important;
        z-index: 21 !important;
        transform: translateY(-50%) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 32px !important;
        margin: 0 !important;
        padding: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #2f3033 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 999px !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__back-icon {
        width: 18px !important;
        height: 18px !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__back-icon::before,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__back-icon::after {
        width: 18px !important;
        height: 1.6px !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__header-spacer {
        display: none !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] > #of-booking-panel.of-booking:not([hidden]) > .of-booking__body {
        position: relative !important;
        z-index: 1 !important;
        grid-row: 2 !important;
        display: grid !important;
        align-content: start !important;
        justify-items: center !important;
        gap: 0 !important;
        width: 100vw !important;
        max-width: none !important;
        height: calc(100dvh - 64px) !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 24px clamp(24px, 4vw, 40px) 28px !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }
}

/* Pass 11.28: tablet header service title typography standard. */
@media (min-width: 740px) and (max-width: 1199px) {
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__title,
    body.of-body #of-booking-panel .of-booking__title {
        color: var(--ayvens-theme-brand-secondary-400, #0f3549) !important;
        font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif) !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 20px !important;
        letter-spacing: 0.2px !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        background: none !important;
    }
}

/* Pass 11.37: canonical tablet/desktop service header title alignment. */
@media (min-width: 740px) {
    body.of-body #of-home-ctn {
        --of-canonical-service-header-height: 64px;
        --of-canonical-service-title-size: 16px;
        --of-canonical-service-title-line-height: 20px;
        --of-canonical-service-title-letter-spacing: 0.2px;
    }

    body.of-body #of-home-ctn .of-search-shell--step-title .of-search-shell__header,
    body.of-body #of-home-ctn[data-results-state="ready"] .of-results-shell__header,
    body.of-body #of-home-ctn[data-results-state="empty"] .of-results-shell__header,
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__header,
    body.of-body #of-home-ctn[data-current-stage="booking"] > #of-booking-panel.of-booking .of-booking__header {
        position: relative !important;
        min-height: var(--of-canonical-service-header-height) !important;
        height: var(--of-canonical-service-header-height) !important;
        max-height: var(--of-canonical-service-header-height) !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    body.of-body #of-home-ctn .of-search-shell--step-title .of-search-shell__logo,
    body.of-body #of-home-ctn[data-results-state="ready"] .of-results-shell__title,
    body.of-body #of-home-ctn[data-results-state="empty"] .of-results-shell__title,
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__title,
    body.of-body #of-home-ctn[data-current-stage="booking"] > #of-booking-panel.of-booking .of-booking__title {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100vw - 144px) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--ayvens-theme-brand-secondary-400, #0f3549) !important;
        font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif) !important;
        font-size: var(--of-canonical-service-title-size) !important;
        font-weight: 700 !important;
        line-height: var(--of-canonical-service-title-line-height) !important;
        letter-spacing: var(--of-canonical-service-title-letter-spacing) !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-indent: 0 !important;
        background: none !important;
        background-image: none !important;
        box-sizing: border-box !important;
    }

    body.of-body #of-home-ctn[data-results-state="ready"] .of-results-shell__heading,
    body.of-body #of-home-ctn[data-results-state="empty"] .of-results-shell__heading {
        position: static !important;
        display: block !important;
        width: auto !important;
        height: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Pass 11.56: client feedback - booking modal keeps one content width across all steps,
   with stronger step 2/3 typography and larger confirmation content. */
@media (min-width: 740px) {
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel.of-booking {
        --of-booking-client-width: min(100%, 560px);
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-stepper,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-schedule__intro,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-details__intro,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-summary__intro,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__content--schedule,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__content--details,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__content--summary,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__content--confirmation,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--schedule,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--details,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--summary,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--confirmation {
        width: var(--of-booking-client-width) !important;
        max-width: var(--of-booking-client-width) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-schedule,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-details__form,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-summary {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-stepper {
        margin-bottom: 22px !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-schedule__intro,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-details__intro,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-summary__intro {
        margin-bottom: 18px !important;
        text-align: left !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-schedule__title,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-details__title,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-summary__title {
        font-size: 18px !important;
        line-height: 24px !important;
        letter-spacing: 0.3px !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-schedule__section-title,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-details__section-title {
        font-size: 16px !important;
        line-height: 22px !important;
        letter-spacing: 0.2px !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking .of-search-field__label,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-details__field-block > .of-search-field__label,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-details__readonly-block > .of-search-field__label {
        font-size: 13px !important;
        line-height: 18px !important;
        font-weight: 700 !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-details__section .of-search-input,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-details textarea.of-search-input,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-details__choice {
        font-size: 14px !important;
        line-height: 20px !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--schedule,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--details,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--summary {
        justify-content: space-between !important;
        margin-top: 24px !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--confirmation {
        justify-content: center !important;
        margin-top: 24px !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-confirmation {
        justify-items: center !important;
        gap: 24px !important;
        width: 100% !important;
        padding-top: 10px !important;
        text-align: center !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-confirmation__icon {
        width: 104px !important;
        height: 104px !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-confirmation__title {
        max-width: 460px !important;
        font-size: 22px !important;
        line-height: 30px !important;
        text-align: center !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-confirmation__next {
        width: min(100%, 460px) !important;
        max-width: 460px !important;
        padding: 22px 24px !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-confirmation__subtitle {
        font-size: 16px !important;
        line-height: 22px !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-confirmation__text {
        font-size: 14px !important;
        line-height: 21px !important;
    }
}

@media (min-width: 1200px) {
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel.of-booking {
        --of-booking-client-width: min(100%, 920px);
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__content--confirmation,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--confirmation {
        --of-booking-client-width: min(100%, 720px);
    }
}

/* Pass 11.57: booking details alignment cleanup.
   Keep details actions at the same vertical rhythm as the schedule step,
   normalize secondary button border, and make all step 2 field labels consistent. */
@media (min-width: 740px) {
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions .of-search-action--secondary {
        border: 1px solid var(--of-flow-brand-color, #0f3549) !important;
        box-shadow: none !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--details {
        margin-top: 14px !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-details__section .of-search-field > .of-search-field__label,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-details__section .of-booking-details__field-block > .of-search-field__label,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-details__section .of-booking-details__readonly-block > .of-search-field__label {
        color: var(--of-flow-brand-color, #0f3549) !important;
        font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif) !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 18px !important;
        letter-spacing: 0 !important;
    }
}

/* Pass 11.58: booking action row and back button canonical alignment.
   Keep Voltar/Continuar in the same visual position from step 1 to step 2,
   and force all desktop booking back buttons to use the same dimensions, border and arrow. */
@media (min-width: 740px) {
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--schedule,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--details,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--summary {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: var(--of-booking-client-width) !important;
        max-width: var(--of-booking-client-width) !important;
        min-height: 52px !important;
        height: 52px !important;
        margin: 22px auto 0 !important;
        padding: 0 !important;
        gap: 12px !important;
        box-sizing: border-box !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-back-btn,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-schedule-back-btn,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-back-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        min-width: 140px !important;
        height: 52px !important;
        min-height: 52px !important;
        margin: 0 !important;
        padding: 0 26px !important;
        gap: 12px !important;
        color: var(--of-flow-brand-color, #0f3549) !important;
        background: #ffffff !important;
        border: 2px solid var(--of-flow-brand-color, #0f3549) !important;
        border-radius: 999px !important;
        box-shadow: none !important;
        font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif) !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 20px !important;
        letter-spacing: 0 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-back-btn::before,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-schedule-back-btn::before,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-back-btn::before {
        content: "" !important;
        display: block !important;
        flex: 0 0 10px !important;
        width: 10px !important;
        height: 10px !important;
        margin: 0 !important;
        border: 0 !important;
        border-left: 2px solid currentColor !important;
        border-bottom: 2px solid currentColor !important;
        transform: rotate(45deg) !important;
        box-sizing: border-box !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-back-btn > span,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-schedule-back-btn > span,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-back-btn > span {
        display: inline-block !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 20px !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-continue-btn,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-schedule-continue-btn,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-confirm-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        min-width: 165px !important;
        height: 52px !important;
        min-height: 52px !important;
        margin: 0 0 0 auto !important;
        padding: 0 28px !important;
        gap: 12px !important;
        color: #ffffff !important;
        background: var(--of-flow-brand-color, #0f3549) !important;
        border: 2px solid var(--of-flow-brand-color, #0f3549) !important;
        border-radius: 999px !important;
        font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif) !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 20px !important;
        letter-spacing: 0 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-continue-btn:disabled,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-schedule-continue-btn:disabled,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-confirm-btn:disabled {
        color: #ffffff !important;
        background: #8399a3 !important;
        border-color: #8399a3 !important;
        opacity: 1 !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-details .of-search-field__label,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-details__section .of-search-field > .of-search-field__label,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-details__section .of-booking-details__field-block > .of-search-field__label,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-details__section .of-booking-details__readonly-block > .of-search-field__label {
        color: var(--of-flow-brand-color, #0f3549) !important;
        font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif) !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 18px !important;
        letter-spacing: 0 !important;
    }
}

/* Pass 11.60: lock booking action rails to a single canonical position.
   Voltar/Continuar must not move between Data e hora, Detalhes and Resumo.
   The secondary back button also uses one exact visual definition in every step. */
@media (min-width: 740px) {
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__body {
        position: relative !important;
        padding-bottom: 118px !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__content--schedule,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__content--details,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__content--summary {
        position: static !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--schedule,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--details,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--summary {
        position: absolute !important;
        left: 50% !important;
        bottom: 54px !important;
        transform: translateX(-50%) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: min(100%, 580px) !important;
        max-width: calc(100% - 64px) !important;
        min-height: 52px !important;
        height: 52px !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 12px !important;
        box-sizing: border-box !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-schedule-back-btn,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-back-btn,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-back-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 140px !important;
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        margin: 0 !important;
        padding: 0 26px !important;
        gap: 12px !important;
        color: var(--of-flow-brand-color, #0f3549) !important;
        background: #ffffff !important;
        border: 2px solid var(--of-flow-brand-color, #0f3549) !important;
        border-radius: 999px !important;
        box-shadow: none !important;
        font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif) !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 20px !important;
        letter-spacing: 0 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
        appearance: none !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-schedule-back-btn::before,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-back-btn::before,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-back-btn::before {
        content: "" !important;
        display: block !important;
        flex: 0 0 10px !important;
        width: 10px !important;
        min-width: 10px !important;
        height: 10px !important;
        min-height: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-left: 2px solid currentColor !important;
        border-bottom: 2px solid currentColor !important;
        border-radius: 0 !important;
        transform: rotate(45deg) !important;
        box-sizing: border-box !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-schedule-back-btn::after,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-back-btn::after,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-back-btn::after {
        display: none !important;
        content: none !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-schedule-back-btn > span,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-back-btn > span,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-back-btn > span {
        display: inline-block !important;
        margin: 0 !important;
        padding: 0 !important;
        color: inherit !important;
        font: inherit !important;
        line-height: 20px !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-schedule-continue-btn,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-continue-btn,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-confirm-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 165px !important;
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        margin: 0 0 0 auto !important;
        padding: 0 28px !important;
        gap: 12px !important;
        border: 2px solid var(--of-flow-brand-color, #0f3549) !important;
        border-radius: 999px !important;
        font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif) !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 20px !important;
        letter-spacing: 0 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
        appearance: none !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-schedule-continue-btn:disabled,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-continue-btn:disabled,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-confirm-btn:disabled {
        color: #ffffff !important;
        background: #8399a3 !important;
        border-color: #8399a3 !important;
        opacity: 1 !important;
    }
}


/* Pass 11.61: align booking action buttons to the same content/card extremes.
   The action rail keeps the fixed vertical position from 11.60, but its width
   returns to the canonical booking content width instead of the temporary narrow rail. */
@media (min-width: 740px) {
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--schedule,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--details,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--summary {
        width: var(--of-booking-client-width) !important;
        max-width: var(--of-booking-client-width) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        justify-content: space-between !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-schedule-back-btn,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-back-btn,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-back-btn {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-schedule-continue-btn,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-continue-btn,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-confirm-btn {
        margin-left: auto !important;
        margin-right: 0 !important;
    }
}

/* Pass 11.62: keep schedule actions aligned to the schedule card width.
   At 1200px+ the booking content variable grows for the two-column details/summary,
   but the Data e hora card remains 580px wide, so its action rail must not expand. */
@media (min-width: 740px) {
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--schedule {
        width: min(100%, 580px) !important;
        max-width: min(100%, 580px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        justify-content: space-between !important;
    }
}

/* Pass 11.63: schedule action rail balance at desktop widths.
   Pass 11.62 fixed the excessive spread by forcing 580px at all sizes,
   but at 1200px+ that became too narrow versus the schedule card.
   Keep the fixed vertical rail and use an intermediate width only for Data e hora. */
@media (min-width: 740px) {
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--schedule {
        width: min(var(--of-booking-client-width), 720px) !important;
        max-width: min(var(--of-booking-client-width), 720px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        justify-content: space-between !important;
    }
}

/* Pass 11.64: booking schedule actions use the same grid limit as the form.
   Do not use intermediate/manual widths for the Data e hora actions: the
   Voltar/Continuar rail must match the schedule form/content grid. */
@media (min-width: 740px) {
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--schedule {
        width: var(--of-booking-client-width) !important;
        max-width: var(--of-booking-client-width) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        justify-content: space-between !important;
    }
}

/* Pass 11.65: booking actions return to the form flow.
   The action buttons must sit immediately after the current form/card, not pinned
   to the bottom of the modal. They still align to the same booking grid limits. */
@media (min-width: 740px) {
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__body {
        position: relative !important;
        padding-bottom: 40px !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--schedule,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--details,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--summary {
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: var(--of-booking-client-width) !important;
        max-width: var(--of-booking-client-width) !important;
        min-height: 52px !important;
        height: 52px !important;
        margin: 34px auto 0 !important;
        padding: 0 !important;
        gap: 12px !important;
        box-sizing: border-box !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--schedule {
        margin-top: 34px !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--details,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--summary {
        margin-top: 34px !important;
    }
}


/* Pass 11.67: booking detail labels follow the Figma text token exactly.
   Typography only; booking actions/layout are untouched. */
@media (min-width: 740px) {
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-details .of-search-field__label,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-details__section .of-search-field > .of-search-field__label,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-details__section .of-booking-details__field-block > .of-search-field__label,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-details__section .of-booking-details__readonly-block > .of-search-field__label {
        color: var(--ayvens-theme-text-text-body, #0F3549) !important;
        font-family: "Source Sans 3", sans-serif !important;
        font-size: 14px !important;
        font-style: normal !important;
        font-weight: 700 !important;
        line-height: 20px !important;
    }
}

/* Pass 11.80: reserve input text space for validation status icons in booking details.
   Desktop/tablet compact overrides must not allow long values, especially email,
   to render underneath the success/error icon. */
@media (min-width: 740px) {
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-details__section .of-search-field.of-booking-details__valid > .of-search-input,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-details__section .of-search-field.of-booking-details__invalid > .of-search-input {
        padding-right: 35px !important;
    }
}

/* 20260616 client feedback pass16: booking action labels without chevrons and lighter weight. */
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-back-btn::after,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-continue-btn::after,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-schedule-back-btn::after,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-schedule-continue-btn::after,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-back-btn::after,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-confirm-btn::after,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions .of-search-action--primary::after,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions .of-search-action--secondary::after,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions .of-flow-button::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    flex-basis: 0 !important;
    border: 0 !important;
}

body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-back-btn,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-continue-btn,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-schedule-back-btn,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-schedule-continue-btn,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-back-btn,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-confirm-btn,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions .of-search-action {
    gap: 0 !important;
    font-weight: 500 !important;
}

/* 20260616 client feedback pass17: remove action button chevrons generated through ::before as well. */
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-back-btn::before,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-schedule-back-btn::before,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-back-btn::before,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions .of-search-action--secondary::before,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions .of-flow-button--secondary::before {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    flex: 0 0 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    transform: none !important;
}

body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions .of-search-action__arrow,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-confirm-btn .of-search-action__arrow {
    display: none !important;
}

body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-back-btn,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-schedule-back-btn,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-back-btn {
    gap: 0 !important;
    font-weight: 500 !important;
}

/* 20260624 pass15: revisão já recolhe a informação adicional no passo inicial de avaria; no detalhe do booking não volta a pedir a mesma informação. */
#of-booking-panel[data-service-family="revision"] .of-booking-details__field-block--notes {
    display: none !important;
}

/* 20260624 pass16: keep mobile summary cards/text inside the booking grid. */
@media (max-width: 739px) {
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__content--summary,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-summary,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-summary__card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-summary__card,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-summary__item,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-summary__contact-list,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-summary__contact-row,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-summary__value,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-summary__contact-row dd {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        box-sizing: border-box !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-summary__contact-row {
        grid-template-columns: minmax(0, 92px) minmax(0, 1fr) !important;
    }
}

/* 20260624 pass19: keep mobile summary action buttons inside the viewport.
   The base confirm button has a large minimum width; on narrow screens the
   Summary footer needs compact, content-width actions so the primary button
   does not push the panel outside the mobile grid. */
@media (max-width: 739px) {
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--summary {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 42px !important;
        margin: 16px auto 0 !important;
        padding: 0 !important;
        gap: 8px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--summary #of-booking-summary-back-btn,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--summary #of-booking-summary-confirm-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(50% - 4px) !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        margin: 0 !important;
        padding: 0 18px !important;
        border-radius: 999px !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        line-height: 22px !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--summary #of-booking-summary-confirm-btn {
        flex-basis: auto !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

/* 20260624 pass21: booking full-screen process action footer.
   Keep the navigation actions fixed at the bottom while the central booking
   content remains scrollable. Conversion labels can change, but the footer
   placement stays consistent across mobile, tablet and desktop. */
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__body {
    padding-bottom: 112px !important;
}

body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--schedule,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--details,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--summary,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--confirmation {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1100 !important;
    display: flex !important;
    align-items: center !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    background: var(--of-flow-page-bg, #f6f6f6) !important;
    border-top: 1px solid rgba(15, 53, 73, 0.08) !important;
    box-shadow: 0 -8px 24px rgba(15, 53, 73, 0.06) !important;
    box-sizing: border-box !important;
}

body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--confirmation {
    justify-content: flex-end !important;
}

@media (max-width: 739px) {
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__body {
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--schedule,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--details,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--summary,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--confirmation {
        min-height: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
        padding: 14px 20px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        gap: 12px !important;
        justify-content: space-between !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--confirmation {
        justify-content: flex-end !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--schedule .of-search-action,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--details .of-search-action,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--summary .of-search-action {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        margin: 0 !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--confirmation .of-search-action {
        flex: 0 1 auto !important;
        width: auto !important;
        min-width: 140px !important;
        max-width: 100% !important;
        height: 52px !important;
        min-height: 52px !important;
        margin: 0 !important;
        padding: 0 28px !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
    }
}

@media (min-width: 740px) {
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__body {
        padding-bottom: 112px !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--schedule,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--details,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--summary,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--confirmation {
        min-height: 88px !important;
        padding: 18px 48px !important;
        gap: 20px !important;
        justify-content: space-between !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--confirmation {
        justify-content: flex-end !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--schedule .of-search-action,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--details .of-search-action,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--summary .of-search-action,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--confirmation .of-search-action {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 140px !important;
        max-width: none !important;
        height: 52px !important;
        min-height: 52px !important;
        margin: 0 !important;
        padding: 0 28px !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
    }
}

/* 20260624 pass26: keep booking actions fixed to the viewport bottom.
   The central booking area scrolls; the conversion/navigation actions remain
   fully visible at the bottom of the full-screen process. */
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel.of-booking {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
}

body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__body {
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--schedule,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--details,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--summary,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--confirmation {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    z-index: 2200 !important;
    display: flex !important;
    align-items: center !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    background: var(--of-flow-page-bg, #f6f6f6) !important;
    border-top: 1px solid rgba(15, 53, 73, 0.08) !important;
    box-shadow: 0 -8px 24px rgba(15, 53, 73, 0.06) !important;
    transform: none !important;
    box-sizing: border-box !important;
}

body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--confirmation {
    justify-content: flex-end !important;
}

@media (max-width: 739px) {
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel {
        --of-booking-fixed-actions-height: calc(86px + env(safe-area-inset-bottom, 0px));
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__body {
        padding-bottom: calc(var(--of-booking-fixed-actions-height) + 16px) !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--schedule,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--details,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--summary,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--confirmation {
        min-height: var(--of-booking-fixed-actions-height) !important;
        height: var(--of-booking-fixed-actions-height) !important;
        padding: 14px 20px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        gap: 12px !important;
        justify-content: space-between !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--confirmation {
        justify-content: flex-end !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--schedule .of-search-action,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--details .of-search-action,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--summary .of-search-action {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        margin: 0 !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--confirmation .of-search-action {
        flex: 0 1 auto !important;
        width: auto !important;
        min-width: 140px !important;
        max-width: 100% !important;
        height: 52px !important;
        min-height: 52px !important;
        margin: 0 !important;
        padding: 0 28px !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
    }
}

@media (min-width: 740px) {
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel {
        --of-booking-fixed-actions-height: 88px;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__body {
        padding-bottom: calc(var(--of-booking-fixed-actions-height) + 24px) !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--schedule,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--details,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--summary,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--confirmation {
        min-height: var(--of-booking-fixed-actions-height) !important;
        height: var(--of-booking-fixed-actions-height) !important;
        padding: 18px 48px !important;
        gap: 20px !important;
        justify-content: space-between !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--confirmation {
        justify-content: flex-end !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--schedule .of-search-action,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--details .of-search-action,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--summary .of-search-action,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--confirmation .of-search-action {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 140px !important;
        max-width: none !important;
        height: 52px !important;
        min-height: 52px !important;
        margin: 0 !important;
        padding: 0 28px !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
    }
}

/* 20260624 pass28: summary actions must match the previous booking step actions.
   Pass19 compacted the Summary buttons to avoid overflow, but after the fixed
   bottom rail this created a different visual behaviour from Detalhes. Keep the
   same full-width mobile action split used by the previous booking step. */
@media (max-width: 739px) {
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--summary {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        height: var(--of-booking-fixed-actions-height) !important;
        min-height: var(--of-booking-fixed-actions-height) !important;
        margin: 0 !important;
        padding: 14px 20px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        gap: 12px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--summary #of-booking-summary-back-btn,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--summary #of-booking-summary-confirm-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        margin: 0 !important;
        padding: 0 16px !important;
        border-radius: 999px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 18px !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--summary #of-booking-summary-confirm-btn {
        flex-basis: 0 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}


/* 20260624 pass29: keep Summary action typography equal to the previous booking step.
   Pass28 restored the two-button footer split, but the old compact Summary
   override still reduced the label size. */
@media (max-width: 739px) {
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--summary #of-booking-summary-back-btn,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--summary #of-booking-summary-confirm-btn {
        font-size: 16px !important;
        line-height: 22px !important;
        font-weight: 500 !important;
    }
}


/* 20260624 pass30: keep Summary footer labels at the same size as the previous booking step. */
@media (max-width: 739px) {
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--summary #of-booking-summary-back-btn,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--summary #of-booking-summary-confirm-btn {
        font-size: 17px !important;
        line-height: 22px !important;
        font-weight: 500 !important;
    }
}

/* 20260624 pass32: make Summary mobile action labels use the same vertical metrics as Details.
   The previous Summary override kept a different line-height, which made the label
   sit about 1px differently from the previous step. Keep both footers identical. */
@media (max-width: 739px) {
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--details .of-search-action,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--summary .of-search-action {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        margin: 0 !important;
        padding: 0 16px !important;
        border-radius: 999px !important;
        font-size: 17px !important;
        font-weight: 500 !important;
        line-height: normal !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }
}


/* Pass 41: processing state for booking actions that wait for the next step. */
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-action--loading {
    position: relative !important;
    color: transparent !important;
    background: var(--ayvens-theme-brand-secondary-300, #3F5D6D) !important;
    border-color: var(--ayvens-theme-brand-secondary-300, #3F5D6D) !important;
    box-shadow: none !important;
    cursor: wait !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-action--loading > * {
    opacity: 0 !important;
}

body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-action--loading::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 24px;
    height: 24px;
    background: url("/Images/Flow/Icons/loaderframeabsolute.svg") center / 24px 24px no-repeat;
    transform: translate(-50%, -50%);
    animation: of-booking-action-loader-spin 760ms linear infinite;
}

@keyframes of-booking-action-loader-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}


/* Pass 43: center the confirmation footer action.
   The confirmation screen has a single CTA and it should stay visually centred on the bottom rail. */
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__actions--confirmation {
    justify-content: center !important;
}

body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-confirmation-back-btn {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Pass 113: keep the real-agenda hour list inside the calendar height.
   Real ProviderAgenda can return many slots; the right column must scroll internally
   instead of increasing the booking card/body height. */
@media (min-width: 740px) {
    #of-booking-panel .of-booking-schedule {
        align-items: start !important;
    }

    #of-booking-panel .of-booking-schedule__section {
        align-self: start !important;
        max-height: 286px !important;
        overflow: hidden !important;
    }

    #of-booking-panel .of-booking-schedule__hours {
        max-height: 258px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        padding-right: 4px !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    #of-booking-panel .of-booking-schedule__hours::-webkit-scrollbar {
        display: none !important;
    }
}

/* Pass 114: make the hour list itself the scroll container.
   Previous rule was lower specificity than the desktop booking rules that kept
   the hours overflow visible, so the list was clipped by the card/footer area
   instead of scrolling internally. */
@media (min-width: 740px) {
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-schedule {
        align-items: start !important;
        overflow: hidden !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-schedule__section {
        align-self: start !important;
        min-height: 0 !important;
        max-height: 286px !important;
        overflow: hidden !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-schedule__hours {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-content: start !important;
        gap: 10px !important;
        width: 100% !important;
        min-height: 0 !important;
        max-height: 244px !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        padding-right: 8px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;
        pointer-events: auto !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-schedule__hours::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-schedule-item {
        width: 100% !important;
        flex: 0 0 auto !important;
    }
}

/* Pass 115: keep the hour list scrollable but hide the scrollbar chrome.
   The internal scroll remains active with mouse wheel/touchpad/touch, but the
   visual scrollbar is hidden to keep the agenda clean. */
@media (min-width: 740px) {
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-schedule__hours {
        overflow-y: auto !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-schedule__hours::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
}

/* PRD-006: hide return/pre-inspection summary rows even when older responsive rules force display:grid. */
#of-booking-panel .of-booking-summary__item[hidden],
#of-booking-panel .of-booking-summary__item[aria-hidden="true"] {
    display: none !important;
}

/* PRD-015: APP-DRIVER Claim peritagem uses date-only selection.
   The client does not need hour slots for Claims; selecting an eligible date
   after the configured business-hour lead time continues the Claim flow. */
#of-booking-panel #of-booking-schedule-panel[data-claim-schedule="true"] .of-booking-schedule__section,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-schedule-panel[data-claim-schedule="true"] .of-booking-schedule__section {
    display: none !important;
}

#of-booking-panel #of-booking-schedule-panel[data-claim-schedule="true"] .of-booking-schedule,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-schedule-panel[data-claim-schedule="true"] .of-booking-schedule {
    grid-template-columns: minmax(0, 1fr) !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;
    }
}

/* Phase 17: hide technical debug panel from validation layout. */
.of-debug-details {
    display: none;
}

/* WEB app install entry and QR card. */
.of-app-install {
    display: none;
}

body.of-body--web #of-home-ctn[data-access-from="APP-DRIVER"] .of-app-install,
body.of-body--web #of-home-ctn[data-access-from="AXAWHATSAPP"] .of-app-install,
body.of-body--app-driver #of-home-ctn .of-app-install,
body.of-body--axa-whatsapp #of-home-ctn .of-app-install,
body.of-body--web #of-home-ctn[data-service-flow-active="true"] .of-app-install,
body.of-body--web #of-home-ctn[data-results-state="ready"] .of-app-install,
body.of-body--web #of-home-ctn[data-results-state="empty"] .of-app-install,
body.of-body--web #of-home-ctn[data-current-stage="partner-detail"] .of-app-install,
body.of-body--web #of-home-ctn[data-current-stage="booking"] .of-app-install {
    display: none !important;
}

body.of-body--web #of-home-ctn[data-access-from="WEB"] .of-app-install,
body.of-body--web #of-home-ctn:not([data-access-from]) .of-app-install,
body.of-body--web #of-home-ctn[data-access-from=""] .of-app-install {
    color: #0f3549;
}

.of-app-install__cta {
    display: grid;
    gap: 5px;
    justify-items: center;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: #0f3549;
    font-family: var(--of-font-family-form, "Source Sans 3", Arial, Helvetica, sans-serif);
    cursor: pointer;
}

.of-app-install__cta-title {
    display: block;
    font-family: var(--of-font-family-form, "Source Sans 3", Arial, Helvetica, sans-serif);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
}

.of-app-install__store-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.of-app-install__store-img {
    display: block;
    width: auto;
    height: 34px;
}

.of-app-install__card {
    position: fixed;
    right: 20px;
    bottom: calc(var(--of-responsive-shell-footer-height, 32px) + 20px);
    z-index: 70;
    width: min(350px, calc(100vw - 48px));
    padding: 18px;
    border-radius: 5px;
    background: #ffffff;
    box-shadow: 0 2px 18px rgba(15, 53, 73, 0.22);
    color: #0f3549;
    font-family: var(--of-font-family-form, "Source Sans 3", Arial, Helvetica, sans-serif);
}

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

.of-app-install__close {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin: 0 0 10px auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
}

.of-app-install__close img {
    display: block;
    width: 12px;
    height: 12px;
}

.of-app-install__hero {
    display: block;
    width: 100%;
    border-radius: 5px;
}

.of-app-install__title {
    margin: 14px 0 8px;
    font-family: var(--of-font-family-brand, "Chillax", Arial, Helvetica, sans-serif);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    color: #0f3549;
}

.of-app-install__copy {
    margin: 0 0 10px;
    font-family: var(--of-font-family-form, "Source Sans 3", Arial, Helvetica, sans-serif);
    font-size: 13px;
    line-height: 1.35;
    color: #0f3549;
}

.of-app-install__features {
    display: grid;
    gap: 6px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.of-app-install__features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--of-font-family-form, "Source Sans 3", Arial, Helvetica, sans-serif);
    font-size: 13px;
    line-height: 1.25;
}

.of-app-install__check {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: #ffc905;
}

.of-app-install__check svg {
    display: block;
    width: 18px;
    height: 18px;
}

.of-app-install__download-row {
    display: block;
    margin-top: 20px;
}

.of-app-install__qr,
.of-app-install__qr img {
    display: block;
    width: 140px;
    height: 140px;
}

@media (min-width: 740px) {
    body.of-body--web #of-home-ctn[data-access-from="WEB"] .of-app-install,
    body.of-body--web #of-home-ctn:not([data-access-from]) .of-app-install,
    body.of-body--web #of-home-ctn[data-access-from=""] .of-app-install {
        position: fixed;
        top: 9px;
        right: var(--of-layout-margin, 32px);
        z-index: 60;
        display: block;
        width: 236px;
        padding: 0;
        background: #ffffff;
        border-radius: 5px;
        box-sizing: border-box;
    }

    .of-app-install__card {
        right: 20px;
        bottom: calc(var(--of-responsive-shell-footer-height, 32px) + 20px);
    }
}

@media (min-width: 740px) and (max-width: 1279px) {
    body.of-body--web #of-home-ctn[data-access-from="WEB"] .of-app-install,
    body.of-body--web #of-home-ctn:not([data-access-from]) .of-app-install,
    body.of-body--web #of-home-ctn[data-access-from=""] .of-app-install {
        top: 12px;
        right: 24px;
        width: 224px;
    }

    .of-app-install__cta-title {
        font-size: 15px;
    }

    .of-app-install__store-img {
        height: 30px;
    }

    .of-app-install__card {
        right: 20px;
        bottom: calc(var(--of-responsive-shell-footer-height, 32px) + 20px);
        width: 330px;
    }
}

@media (max-width: 739px) {
    body.of-body--web #of-home-ctn[data-access-from="WEB"] .of-app-install,
    body.of-body--web #of-home-ctn:not([data-access-from]) .of-app-install,
    body.of-body--web #of-home-ctn[data-access-from=""] .of-app-install {
        position: fixed;
        left: 50%;
        bottom: calc(120px + env(safe-area-inset-bottom, 0px));
        z-index: 90;
        display: block;
        width: min(280px, calc(100vw - 40px));
        padding: 0;
        background: transparent;
        transform: translateX(-50%);
        box-sizing: border-box;
    }

    .of-app-install__cta {
        width: 100%;
        gap: 5px;
    }

    .of-app-install__cta-title {
        font-size: 14px;
        line-height: 1.1;
    }

    .of-app-install__store-buttons {
        justify-content: center;
        gap: 8px;
        width: 100%;
    }

    .of-app-install__store-img {
        height: 29px;
    }

    .of-app-install__card {
        display: none !important;
    }
}

@media (max-width: 390px) and (max-height: 700px) {
    body.of-body--web #of-home-ctn[data-access-from="WEB"] .of-app-install,
    body.of-body--web #of-home-ctn:not([data-access-from]) .of-app-install,
    body.of-body--web #of-home-ctn[data-access-from=""] .of-app-install {
        bottom: calc(104px + env(safe-area-inset-bottom, 0px));
    }

    .of-app-install__cta-title {
        font-size: 13px;
    }

    .of-app-install__store-img {
        height: 27px;
    }
}

/* Pass 54: restore the legacy app CTA placement/scale while keeping the new QR card. */
.of-app-install__cta {
    font-family: var(--of-font-family-form, "Source Sans 3", Arial, Helvetica, sans-serif) !important;
}

.of-app-install__cta-title {
    margin: 0;
    font-family: var(--of-font-family-form, "Source Sans 3", Arial, Helvetica, sans-serif) !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
}

@media (min-width: 1280px) {
    body.of-body--web #of-home-ctn[data-access-from="WEB"] .of-app-install,
    body.of-body--web #of-home-ctn:not([data-access-from]) .of-app-install,
    body.of-body--web #of-home-ctn[data-access-from=""] .of-app-install {
        position: fixed !important;
        top: 8px !important;
        right: 32px !important;
        bottom: auto !important;
        left: auto !important;
        z-index: 60 !important;
        display: block !important;
        width: 246px !important;
        padding: 0 !important;
        background: transparent !important;
        border-radius: 5px !important;
        transform: none !important;
    }

    .of-app-install__cta {
        gap: 4px !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .of-app-install__cta-title {
        font-size: 16px !important;
        line-height: 18px !important;
    }

    .of-app-install__store-buttons {
        gap: 7px !important;
    }

    .of-app-install__store-img {
        height: 31px !important;
    }
}

@media (min-width: 740px) and (max-width: 1279px) {
    body.of-body--web #of-home-ctn[data-access-from="WEB"] .of-app-install,
    body.of-body--web #of-home-ctn:not([data-access-from]) .of-app-install,
    body.of-body--web #of-home-ctn[data-access-from=""] .of-app-install {
        position: fixed !important;
        top: auto !important;
        right: auto !important;
        bottom: calc(var(--of-responsive-shell-footer-height, 32px) + 20px) !important;
        left: 40px !important;
        z-index: 60 !important;
        display: block !important;
        width: 218px !important;
        padding: 7px !important;
        background: #ffffff !important;
        border-radius: 5px !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .of-app-install__cta {
        gap: 3px !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .of-app-install__cta-title {
        font-size: 14px !important;
        line-height: 16px !important;
    }

    .of-app-install__store-buttons {
        gap: 5px !important;
    }

    .of-app-install__store-img {
        height: 28px !important;
    }

    .of-app-install__card {
        right: 20px !important;
        bottom: calc(var(--of-responsive-shell-footer-height, 32px) + 20px) !important;
        width: 330px !important;
    }
}

@media (max-width: 739px) {
    body.of-body--web #of-home-ctn[data-access-from="WEB"] .of-app-install,
    body.of-body--web #of-home-ctn:not([data-access-from]) .of-app-install,
    body.of-body--web #of-home-ctn[data-access-from=""] .of-app-install {
        position: fixed !important;
        top: auto !important;
        right: 0 !important;
        bottom: calc(var(--of-flow-footer-height, 88px) + 18px + env(safe-area-inset-bottom, 0px)) !important;
        left: 0 !important;
        z-index: 60 !important;
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        padding: 0 !important;
        background: transparent !important;
        transform: none !important;
        pointer-events: none !important;
    }

    .of-app-install__cta {
        display: inline-grid !important;
        width: auto !important;
        min-width: 176px !important;
        max-width: calc(100vw - 40px) !important;
        gap: 4px !important;
        justify-items: center !important;
        padding: 6px 8px !important;
        background: #ffffff !important;
        border-radius: 5px !important;
        box-shadow: none !important;
        pointer-events: auto !important;
    }

    .of-app-install__cta-title {
        font-size: 12px !important;
        line-height: 14px !important;
        white-space: nowrap !important;
    }

    .of-app-install__store-buttons {
        gap: 5px !important;
        width: auto !important;
    }

    .of-app-install__store-img {
        height: 24px !important;
    }
}

@media (max-width: 390px) and (max-height: 700px) {
    body.of-body--web #of-home-ctn[data-access-from="WEB"] .of-app-install,
    body.of-body--web #of-home-ctn:not([data-access-from]) .of-app-install,
    body.of-body--web #of-home-ctn[data-access-from=""] .of-app-install {
        bottom: calc(var(--of-flow-footer-height, 52px) + 14px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .of-app-install__cta-title {
        font-size: 12px !important;
        line-height: 13px !important;
    }

    .of-app-install__store-img {
        height: 23px !important;
    }
}

/* Pass 55: final placement tuning for the app install CTA. */
@media (min-width: 1280px) {
    body.of-body--web #of-home-ctn[data-access-from="WEB"] .of-app-install,
    body.of-body--web #of-home-ctn:not([data-access-from]) .of-app-install,
    body.of-body--web #of-home-ctn[data-access-from=""] .of-app-install {
        top: 6px !important;
        right: 92px !important;
        width: 218px !important;
        padding: 0 !important;
        background: transparent !important;
    }

    .of-app-install__cta {
        gap: 4px !important;
    }

    .of-app-install__cta-title {
        font-size: 15px !important;
        line-height: 17px !important;
        font-weight: 400 !important;
    }

    .of-app-install__store-buttons {
        gap: 7px !important;
    }

    .of-app-install__store-img {
        height: 28px !important;
    }
}

@media (min-width: 740px) and (max-width: 1279px) {
    body.of-body--web #of-home-ctn[data-access-from="WEB"] .of-app-install,
    body.of-body--web #of-home-ctn:not([data-access-from]) .of-app-install,
    body.of-body--web #of-home-ctn[data-access-from=""] .of-app-install {
        position: fixed !important;
        top: 6px !important;
        right: 72px !important;
        bottom: auto !important;
        left: auto !important;
        z-index: 60 !important;
        display: block !important;
        width: 210px !important;
        padding: 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .of-app-install__cta {
        gap: 3px !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .of-app-install__cta-title {
        font-size: 14px !important;
        line-height: 16px !important;
        font-weight: 400 !important;
    }

    .of-app-install__store-buttons {
        gap: 6px !important;
    }

    .of-app-install__store-img {
        height: 27px !important;
    }

    .of-app-install__card {
        right: 20px !important;
        bottom: calc(var(--of-responsive-shell-footer-height, 32px) + 20px) !important;
        width: 330px !important;
    }
}

@media (max-width: 739px) {
    body.of-body--web #of-home-ctn[data-access-from="WEB"] .of-app-install,
    body.of-body--web #of-home-ctn:not([data-access-from]) .of-app-install,
    body.of-body--web #of-home-ctn[data-access-from=""] .of-app-install {
        position: fixed !important;
        top: auto !important;
        right: 0 !important;
        bottom: calc(135px + env(safe-area-inset-bottom, 0px)) !important;
        left: 0 !important;
        z-index: 65 !important;
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        padding: 0 16px !important;
        background: transparent !important;
        transform: none !important;
        pointer-events: none !important;
        box-sizing: border-box !important;
    }

    .of-app-install__cta {
        display: inline-grid !important;
        width: auto !important;
        min-width: 184px !important;
        max-width: calc(100vw - 48px) !important;
        gap: 4px !important;
        justify-items: center !important;
        padding: 6px 10px !important;
        background: #ffffff !important;
        border: 1px solid rgba(15, 53, 73, 0.10) !important;
        border-radius: 5px !important;
        box-shadow: 0 1px 4px rgba(15, 53, 73, 0.10) !important;
        pointer-events: auto !important;
    }

    .of-app-install__cta-title {
        font-size: 12px !important;
        line-height: 14px !important;
        font-weight: 400 !important;
        white-space: nowrap !important;
    }

    .of-app-install__store-buttons {
        gap: 6px !important;
        width: auto !important;
    }

    .of-app-install__store-img {
        height: 24px !important;
    }
}

@media (max-width: 390px) and (max-height: 700px) {
    body.of-body--web #of-home-ctn[data-access-from="WEB"] .of-app-install,
    body.of-body--web #of-home-ctn:not([data-access-from]) .of-app-install,
    body.of-body--web #of-home-ctn[data-access-from=""] .of-app-install {
        bottom: calc(135px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .of-app-install__cta {
        min-width: 176px !important;
        padding: 5px 8px !important;
    }

    .of-app-install__cta-title {
        font-size: 11px !important;
        line-height: 13px !important;
    }

    .of-app-install__store-img {
        height: 22px !important;
    }
}


/* Pass 62: the app install CTA is only visible on the initial plate step. */
body.of-body--web #of-home-ctn[data-current-step]:not([data-current-step="plate"]) .of-app-install,
body.of-body--web #of-home-ctn[data-current-stage]:not([data-current-stage="search"]) .of-app-install {
    display: none !important;
}

/* 20260701 PRD-002: client feedback - app store CTA placement and pop-up readability. */
@media (min-width: 1280px) {
    body.of-body--web #of-home-ctn[data-access-from="WEB"] .of-search-plate-content > .of-app-install,
    body.of-body--web #of-home-ctn:not([data-access-from]) .of-search-plate-content > .of-app-install,
    body.of-body--web #of-home-ctn[data-access-from=""] .of-search-plate-content > .of-app-install {
        position: fixed !important;
        top: 7px !important;
        right: 32px !important;
        bottom: auto !important;
        left: auto !important;
        width: 218px !important;
        z-index: 60 !important;
    }
}

.of-app-install__close {
    width: 34px !important;
    height: 34px !important;
    margin: 0 0 8px auto !important;
}

.of-app-install__close img {
    width: 18px !important;
    height: 18px !important;
}

.of-app-install__title {
    font-size: 18px !important;
    line-height: 22px !important;
}

.of-app-install__copy,
.of-app-install__features li {
    font-size: 16px !important;
    line-height: 22px !important;
}

@media (max-width: 739px) {
    body.of-body--web #of-home-ctn[data-access-from="WEB"] .of-search-plate-content > .of-app-install,
    body.of-body--web #of-home-ctn:not([data-access-from]) .of-search-plate-content > .of-app-install,
    body.of-body--web #of-home-ctn[data-access-from=""] .of-search-plate-content > .of-app-install {
        position: static !important;
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 6px 0 0 !important;
        padding: 0 !important;
        transform: none !important;
        pointer-events: auto !important;
        box-sizing: border-box !important;
    }

    .of-search-plate-content > .of-app-install .of-app-install__cta {
        display: inline-grid !important;
        width: auto !important;
        min-width: 184px !important;
        max-width: calc(100vw - 48px) !important;
        padding: 6px 10px !important;
        background: #ffffff !important;
        border: 1px solid rgba(15, 53, 73, 0.10) !important;
        border-radius: 5px !important;
        box-shadow: 0 1px 4px rgba(15, 53, 73, 0.10) !important;
        pointer-events: auto !important;
    }
}


/* 20260701 PRD-003: client feedback - add breathing room above mobile app-store CTA. */
@media (max-width: 739px) {
    body.of-body--web #of-home-ctn[data-access-from="WEB"] .of-search-plate-content > .of-app-install,
    body.of-body--web #of-home-ctn:not([data-access-from]) .of-search-plate-content > .of-app-install,
    body.of-body--web #of-home-ctn[data-access-from=""] .of-search-plate-content > .of-app-install {
        margin-top: 45px !important;
    }
}

/* Home responsive shell. */
/* Search and results share one responsive structure. */
/* Mobile shows either search or result map. S stays mobile-expanded. M keeps search + map with a horizontal results rail. L/XL/XXL use desktop-like layout. */
/* Velocity/Ayvens breakpoints used by this shell:
   XS 0-479px | S 480-739px | M 740-959px | L 960-1279px | XL 1280-1599px | XXL 1600px+ */


.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);
        align-items: start;
        min-height: 100dvh;
    }

    .of-home__search {
        grid-column: 1;
        min-height: 100dvh;
        height: auto;
        overflow: visible;
    }

    #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: 739px) {
    .of-main {
        padding: 0;
    }

    .of-home {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        min-height: 100dvh;
    }

    .of-home__search {
        grid-column: 1;
        min-height: 100dvh;
        height: auto;
        overflow: visible;
    }

    #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: 16px;
        bottom: 16px;
        left: 16px;
        z-index: 20;
        display: grid;
        height: auto;
        max-height: 120px;
    }

    #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: 740px) and (max-width: 959px) {
    .of-main {
        padding: var(--of-layout-margin, 24px);
    }

    .of-main--app-driver {
        padding: 0;
    }

    .of-home {
        grid-template-columns: clamp(300px, 38vw, 336px) minmax(0, 1fr);
        column-gap: 14px;
        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%;
        min-height: 0;
    }

    .of-home__results {
        grid-column: 2;
        grid-row: 1;
        height: 100%;
        min-height: 0;
    }

    .of-home__results-map {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        height: 100%;
    }

    .of-home__results-partners {
        position: absolute;
        right: 16px;
        bottom: 16px;
        left: 16px;
        z-index: 20;
        display: grid;
        height: auto;
        max-height: 132px;
    }

    #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: 960px) {
    .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;
    }
}

/* Desktop-like base layout starts at Velocity L / 960px. */
@media (min-width: 960px) {
    .of-body--web .of-main {
        width: 100%;
        max-width: none;
        min-height: 100dvh;
        margin: 0;
        padding: 0;
    }

    .of-home {
        display: grid;
        grid-template-columns: var(--of-flow-desktop-search-width, minmax(360px, 33.333vw)) minmax(0, 1fr);
        gap: 0;
        width: 100%;
        height: 100dvh;
        min-height: var(--of-flow-desktop-map-min-height, 620px);
        overflow: hidden;
        background: var(--ayvens-theme-neutral-neutral-100, #f6f6f6);
    }

    .of-home__search {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .of-home__results {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .of-home__results-map {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        height: 100%;
    }

    .of-home__results-partners {
        top: var(--of-flow-desktop-panel-padding-y, 32px);
        right: var(--of-flow-desktop-panel-padding-x, 32px);
        bottom: calc(var(--of-flow-desktop-footer-height, 56px) + var(--of-flow-desktop-panel-padding-y, 32px));
        width: var(--of-flow-desktop-results-list-width, 312px);
    }
}

/* Desktop-like T5 list/card click refinement starts at Velocity L / 960px. */
@media (min-width: 960px) {
    #of-home-ctn[data-results-state="ready"] .of-home__results-partners,
    #of-home-ctn[data-results-state="empty"] .of-home__results-partners {
        top: 12px;
        right: var(--of-flow-desktop-panel-padding-x, 24px);
        bottom: var(--of-flow-desktop-footer-height, 56px);
        width: var(--of-flow-desktop-results-list-width, 332px);
    }
}



/* Desktop-like T5 balance refinement starts at Velocity L / 960px. */
@media (min-width: 960px) {
    .of-home {
        grid-template-columns: var(--of-flow-desktop-search-width, clamp(384px, 27vw, 420px)) minmax(0, 1fr);
    }

    #of-home-ctn[data-results-state="ready"] .of-home__results-partners,
    #of-home-ctn[data-results-state="empty"] .of-home__results-partners {
        top: 12px;
        right: var(--of-flow-desktop-panel-padding-x, 20px);
        bottom: 0;
        width: var(--of-flow-desktop-results-list-width, 300px);
    }
}

/* Responsive header/footer shell v2 — header and footer span the full experience.
   Starts only at Velocity M (740px). XS and S remain mobile/mobile-expanded. */
@media (min-width: 740px) {
    .of-body--web .of-main {
        width: 100%;
        max-width: none;
        min-height: 100dvh;
        margin: 0;
        padding: 0;
    }

    .of-home {
        display: grid;
        grid-template-rows: var(--of-responsive-shell-header-height, 64px) minmax(0, 1fr) var(--of-responsive-shell-footer-height, 32px);
        grid-template-columns: clamp(300px, 38vw, 336px) minmax(0, 1fr);
        gap: 0;
        width: 100%;
        height: 100dvh;
        min-height: 560px;
        overflow: hidden;
        background: var(--ayvens-theme-neutral-neutral-100, #f6f6f6);
    }

    .of-home__search {
        display: contents;
    }

    .of-home__results {
        grid-column: 2;
        grid-row: 2;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
    }

    .of-home__results-map {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        height: 100%;
    }

    .of-home__results-partners {
        right: 16px;
        bottom: 16px;
        left: 16px;
        max-height: 132px;
    }
}

@media (min-width: 960px) {
    .of-home {
        grid-template-columns: var(--of-flow-desktop-search-width, clamp(384px, 27vw, 420px)) minmax(0, 1fr);
        grid-template-rows: var(--of-responsive-shell-header-height, 64px) minmax(0, 1fr) var(--of-responsive-shell-footer-height, 32px);
        min-height: var(--of-flow-desktop-map-min-height, 620px);
    }

    .of-home__results-partners {
        top: 12px;
        right: var(--of-flow-desktop-panel-padding-x, 20px);
        bottom: 0;
        left: auto;
        width: var(--of-flow-desktop-results-list-width, 300px);
        max-height: none;
    }
}

@media (min-width: 1600px) {
    .of-home {
        grid-template-columns: var(--of-flow-desktop-search-width, clamp(400px, 24vw, 460px)) minmax(0, 1fr);
    }
}

/* Pass 10.5: Velocity M / tablet portrait layout polish for early search steps. */
@media (min-width: 740px) and (max-width: 959px) {
    .of-home {
        grid-template-columns: clamp(320px, 40vw, 360px) minmax(0, 1fr);
    }

    .of-home__results-partners {
        right: 18px;
        bottom: 18px;
        left: 18px;
        max-height: 136px;
    }
}

/* S results shell correction 2026-06-10: keep header, map and footer in the right rows. */
@media (min-width: 480px) and (max-width: 739px) {
    #of-home-ctn[data-results-state="ready"],
    #of-home-ctn[data-results-state="empty"] {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: var(--of-flow-header-height, 88px) minmax(0, 1fr) 64px;
        width: 100%;
        height: 100dvh;
        min-height: 100dvh;
        overflow: hidden;
    }

    #of-home-ctn[data-results-state="ready"] .of-home__search,
    #of-home-ctn[data-results-state="empty"] .of-home__search {
        display: contents !important;
        min-height: 0;
        height: auto;
    }

    #of-home-ctn[data-results-state="ready"] .of-search-shell__header,
    #of-home-ctn[data-results-state="empty"] .of-search-shell__header {
        grid-column: 1;
        grid-row: 1;
        z-index: 30;
        min-height: var(--of-flow-header-height, 88px);
        height: var(--of-flow-header-height, 88px);
    }

    #of-home-ctn[data-results-state="ready"] .of-search-shell__body,
    #of-home-ctn[data-results-state="empty"] .of-search-shell__body {
        display: none !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-search-shell__footer,
    #of-home-ctn[data-results-state="empty"] .of-search-shell__footer {
        grid-column: 1;
        grid-row: 3;
        z-index: 30;
        display: flex;
        min-height: 64px;
        height: 64px;
        padding: 10px 24px;
        font-size: 12px;
        line-height: 16px;
    }

    #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;
        grid-row: 2;
        width: 100%;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    #of-home-ctn[data-results-state="ready"] .of-home__results-map,
    #of-home-ctn[data-results-state="empty"] .of-home__results-map {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        height: 100%;
    }

    #of-home-ctn[data-results-state="ready"] .of-home__results-partners,
    #of-home-ctn[data-results-state="empty"] .of-home__results-partners {
        right: 16px;
        bottom: 14px;
        left: 16px;
        max-height: 126px;
    }
}

/* Pass 10.12-v2: keep Velocity L (960-1279px) in tablet-like T5 mode.
   Search remains on the left, map on the right, and result cards stay as a horizontal rail.
   Desktop vertical results remain reserved for 1280px+. */
@media (min-width: 960px) and (max-width: 1279px) {
    .of-home {
        grid-template-columns: var(--of-flow-desktop-search-width, clamp(384px, 34vw, 420px)) minmax(0, 1fr);
        grid-template-rows: var(--of-responsive-shell-header-height, 64px) minmax(0, 1fr) var(--of-responsive-shell-footer-height, 32px);
        width: 100%;
        height: 100dvh;
        min-height: 560px;
        overflow: hidden;
    }

    .of-home__search {
        display: contents;
    }

    .of-home__results {
        grid-column: 2;
        grid-row: 2;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
    }

    .of-home__results-map {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        height: 100%;
    }

    #of-home-ctn[data-results-state="ready"] .of-home__results-partners,
    #of-home-ctn[data-results-state="empty"] .of-home__results-partners,
    .of-home__results-partners {
        top: auto;
        right: 18px;
        bottom: 18px;
        left: 18px;
        width: auto;
        max-width: none;
        max-height: 138px;
    }
}

/* Pass 10.17: Desktop T5 results list starts only at 1280px.
   Keep Velocity L (960-1279px) in the validated horizontal/tablet-like mode. */
@media (min-width: 1280px) {
    .of-home {
        grid-template-columns: var(--of-flow-desktop-search-width, clamp(400px, 32vw, 480px)) minmax(0, 1fr);
        grid-template-rows: var(--of-responsive-shell-header-height, 64px) minmax(0, 1fr) var(--of-responsive-shell-footer-height, 32px);
        width: 100%;
        height: 100dvh;
        min-height: var(--of-flow-desktop-map-min-height, 620px);
        overflow: hidden;
    }

    .of-home__search {
        display: contents;
    }

    .of-home__results {
        grid-column: 2;
        grid-row: 2;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
    }

    .of-home__results-map {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        height: 100%;
    }

    #of-home-ctn[data-results-state="ready"] .of-home__results-partners,
    #of-home-ctn[data-results-state="empty"] .of-home__results-partners,
    .of-home__results-partners {
        top: 16px;
        right: 16px;
        bottom: 16px;
        left: auto;
        width: clamp(304px, 27vw, 360px);
        max-width: calc(100% - 32px);
        max-height: none;
    }
}

@media (min-width: 1600px) {
    #of-home-ctn[data-results-state="ready"] .of-home__results-partners,
    #of-home-ctn[data-results-state="empty"] .of-home__results-partners,
    .of-home__results-partners {
        width: 376px;
    }
}


/* Pass 10.21: desktop T5 left results list architecture.
   At Velocity XL (1280px+) the results list uses the same left column as search,
   and the map stays clean on the right. Lower breakpoints keep their validated layout. */
@media (min-width: 1280px) {
    #of-home-ctn[data-results-state="ready"] .of-search-shell__body,
    #of-home-ctn[data-results-state="empty"] .of-search-shell__body {
        display: none !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-home__results,
    #of-home-ctn[data-results-state="empty"] .of-home__results {
        display: contents !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-shell__body,
    #of-home-ctn[data-results-state="empty"] .of-results-shell__body {
        position: static !important;
        display: contents !important;
        width: auto !important;
        height: auto !important;
        min-width: 0;
        min-height: 0;
        overflow: visible !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-home__results-map,
    #of-home-ctn[data-results-state="empty"] .of-home__results-map {
        grid-column: 2;
        grid-row: 2;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
    }

    #of-home-ctn[data-results-state="ready"] .of-home__results-partners,
    #of-home-ctn[data-results-state="empty"] .of-home__results-partners {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        z-index: 12;
        grid-column: 1;
        grid-row: 2;
        display: grid !important;
        width: 100% !important;
        max-width: none !important;
        height: 100%;
        max-height: none !important;
        min-width: 0;
        min-height: 0;
        padding: 16px 12px 14px 12px;
        overflow: hidden;
        background: var(--ayvens-theme-neutral-neutral-100, #f6f6f6);
        box-sizing: border-box;
        pointer-events: auto;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-shell__change-location,
    #of-home-ctn[data-results-state="empty"] .of-results-shell__change-location {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        z-index: 18;
        grid-column: 2;
        grid-row: 2;
        align-self: end;
        justify-self: center;
        margin-bottom: 18px;
    }
}


/* Pass 10.24: slightly reduce desktop results/search column width at Velocity XL+. */
@media (min-width: 1280px) {
    #of-home-ctn.of-home {
        grid-template-columns: 368px minmax(0, 1fr);
    }
}

@media (min-width: 1600px) {
    #of-home-ctn.of-home {
        grid-template-columns: 384px minmax(0, 1fr);
    }
}

/* Pass 10.25: compact Velocity XL desktop left column. */
@media (min-width: 1280px) {
    #of-home-ctn.of-home {
        grid-template-columns: 340px minmax(0, 1fr);
    }
}

@media (min-width: 1600px) {
    #of-home-ctn.of-home {
        grid-template-columns: 360px minmax(0, 1fr);
    }
}


/* Pass 10.41: keep desktop search flow bounded without forcing a visible scroll container. */
@media (min-width: 1280px) {
    #of-home-ctn .of-search-flow {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* Pass 10.28: desktop T5 left results as a proper left-column view.
   Keep XL desktop structure stable and give results the same visual column as search. */
@media (min-width: 1280px) {
    #of-home-ctn.of-home {
        grid-template-columns: 360px minmax(0, 1fr);
    }

    #of-home-ctn[data-results-state="ready"] .of-home__results-partners,
    #of-home-ctn[data-results-state="empty"] .of-home__results-partners {
        grid-column: 1;
        grid-row: 2;
        align-self: stretch;
        justify-self: stretch;
        width: 100% !important;
        height: 100% !important;
        min-width: 0;
        min-height: 0;
        padding: 12px !important;
        background: var(--ayvens-theme-neutral-neutral-100, #f6f6f6) !important;
        border-right: 1px solid rgba(15, 53, 73, 0.08);
        box-sizing: border-box;
        overflow: hidden;
    }

    #of-home-ctn[data-results-state="ready"] .of-home__results-map,
    #of-home-ctn[data-results-state="empty"] .of-home__results-map {
        grid-column: 2;
        grid-row: 2;
    }
}

@media (min-width: 1600px) {
    #of-home-ctn.of-home {
        grid-template-columns: 384px minmax(0, 1fr);
    }
}

/* Pass 10.29: real desktop T5 view structure.
   The results list is now an explicit left-column view and the map is an explicit right-column view. */
.of-results-desktop-list-view,
.of-results-map-view {
    display: contents;
}

@media (min-width: 1280px) {
    #of-home-ctn.of-home {
        grid-template-columns: 360px minmax(0, 1fr) !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-search-shell__body,
    #of-home-ctn[data-results-state="empty"] .of-search-shell__body {
        display: none !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-home__results,
    #of-home-ctn[data-results-state="empty"] .of-home__results {
        display: contents !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-shell__body,
    #of-home-ctn[data-results-state="empty"] .of-results-shell__body {
        display: contents !important;
        width: auto !important;
        height: auto !important;
        min-width: 0;
        min-height: 0;
        overflow: visible !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-desktop-list-view,
    #of-home-ctn[data-results-state="empty"] .of-results-desktop-list-view {
        grid-column: 1;
        grid-row: 2;
        display: grid !important;
        min-width: 0;
        min-height: 0;
        width: 100%;
        height: 100%;
        padding: 10px;
        background: var(--ayvens-theme-neutral-neutral-100, #f6f6f6);
        overflow: hidden;
        box-sizing: border-box;
        z-index: 12;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-map-view,
    #of-home-ctn[data-results-state="empty"] .of-results-map-view {
        grid-column: 2;
        grid-row: 2;
        position: relative;
        display: block !important;
        min-width: 0;
        min-height: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: var(--of-map-bg, #e5ecef);
    }

    #of-home-ctn[data-results-state="ready"] .of-results-map-view .of-home__results-map,
    #of-home-ctn[data-results-state="empty"] .of-results-map-view .of-home__results-map {
        position: relative !important;
        inset: auto !important;
        display: block;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-shell__change-location,
    #of-home-ctn[data-results-state="empty"] .of-results-shell__change-location {
        position: absolute !important;
        left: 50% !important;
        right: auto !important;
        bottom: 22px !important;
        display: inline-flex !important;
        transform: translateX(-50%) !important;
    }
}

@media (min-width: 1600px) {
    #of-home-ctn.of-home {
        grid-template-columns: 384px minmax(0, 1fr) !important;
    }
}

/* Pass 10.30: T5 desktop results real view reset.
   This block overrides the previous experimental desktop result overlays and makes the
   results screen a self-contained view: full-width header, left list column, right map, full-width footer. */
@media (min-width: 1280px) {
    #of-home-ctn[data-results-state="ready"],
    #of-home-ctn[data-results-state="empty"] {
        grid-template-columns: 360px minmax(0, 1fr) !important;
        grid-template-rows: var(--of-responsive-shell-header-height, 64px) minmax(0, 1fr) var(--of-responsive-shell-footer-height, 32px) !important;
        overflow: hidden !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 {
        grid-column: 1 / -1 !important;
        grid-row: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: 360px minmax(0, 1fr) !important;
        grid-template-rows: var(--of-responsive-shell-header-height, 64px) minmax(0, 1fr) var(--of-responsive-shell-footer-height, 32px) !important;
        width: 100% !important;
        height: 100dvh !important;
        min-width: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        background: var(--ayvens-theme-neutral-neutral-100, #f6f6f6);
    }

    #of-home-ctn[data-results-state="ready"] .of-results-shell__header,
    #of-home-ctn[data-results-state="empty"] .of-results-shell__header {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        position: relative !important;
        z-index: 30;
        width: 100% !important;
        height: var(--of-responsive-shell-header-height, 64px) !important;
        min-height: var(--of-responsive-shell-header-height, 64px) !important;
        display: grid !important;
        grid-template-columns: 64px minmax(0, 1fr) 64px !important;
        align-items: center !important;
        padding: 0 !important;
        background: #ffffff !important;
        border-bottom: 1px solid rgba(15, 53, 73, 0.06);
        box-sizing: border-box;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-shell__body,
    #of-home-ctn[data-results-state="empty"] .of-results-shell__body {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        position: relative !important;
        inset: auto !important;
        display: grid !important;
        grid-template-columns: 360px minmax(0, 1fr) !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        background: var(--ayvens-theme-neutral-neutral-100, #f6f6f6) !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-shell__footer,
    #of-home-ctn[data-results-state="empty"] .of-results-shell__footer {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        position: relative !important;
        z-index: 30;
        width: 100% !important;
        height: var(--of-responsive-shell-footer-height, 32px) !important;
        min-height: var(--of-responsive-shell-footer-height, 32px) !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-desktop-list-view,
    #of-home-ctn[data-results-state="empty"] .of-results-desktop-list-view {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: grid !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 8px 10px 10px 10px !important;
        background: var(--ayvens-theme-neutral-neutral-100, #f6f6f6) !important;
        border-right: 1px solid rgba(15, 53, 73, 0.08);
        box-sizing: border-box;
        overflow: hidden !important;
        z-index: 12;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-map-view,
    #of-home-ctn[data-results-state="empty"] .of-results-map-view {
        grid-column: 2 !important;
        grid-row: 1 !important;
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        background: var(--of-map-bg, #e5ecef) !important;
        z-index: 1;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-map-view .of-home__results-map,
    #of-home-ctn[data-results-state="empty"] .of-results-map-view .of-home__results-map {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-map-view .of-results-shell__change-location,
    #of-home-ctn[data-results-state="empty"] .of-results-map-view .of-results-shell__change-location {
        position: absolute !important;
        left: 50% !important;
        right: auto !important;
        bottom: 22px !important;
        z-index: 20;
        display: inline-flex !important;
        transform: translateX(-50%) !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-home__results-partners,
    #of-home-ctn[data-results-state="empty"] .of-home__results-partners {
        position: static !important;
        inset: auto !important;
        display: grid !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box;
    }
}

@media (min-width: 1600px) {
    #of-home-ctn[data-results-state="ready"],
    #of-home-ctn[data-results-state="empty"],
    #of-home-ctn[data-results-state="ready"] .of-home__results,
    #of-home-ctn[data-results-state="empty"] .of-home__results,
    #of-home-ctn[data-results-state="ready"] .of-results-shell__body,
    #of-home-ctn[data-results-state="empty"] .of-results-shell__body {
        grid-template-columns: 384px minmax(0, 1fr) !important;
    }
}

/* Pass 10.31: hard reset for desktop results shell header/back after creating the real T5 view. */
@media (min-width: 1280px) {
    #of-home-ctn[data-results-state="ready"] .of-results-shell__header,
    #of-home-ctn[data-results-state="empty"] .of-results-shell__header {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        position: relative !important;
        z-index: 40 !important;
        display: grid !important;
        grid-template-columns: 72px minmax(0, 1fr) 72px !important;
        align-items: center !important;
        width: 100% !important;
        height: var(--of-responsive-shell-header-height, 64px) !important;
        min-height: var(--of-responsive-shell-header-height, 64px) !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(15, 53, 73, 0.06) !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-shell__back,
    #of-home-ctn[data-results-state="empty"] .of-results-shell__back {
        appearance: none !important;
        -webkit-appearance: none !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        justify-self: start !important;
        width: 44px !important;
        height: 44px !important;
        margin: 0 0 0 24px !important;
        padding: 0 !important;
        color: var(--ayvens-theme-brand-secondary-400, #0f3549) !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 999px !important;
        box-shadow: none !important;
        outline: none;
        overflow: visible !important;
        cursor: pointer !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-shell__back span,
    #of-home-ctn[data-results-state="empty"] .of-results-shell__back span {
        display: block !important;
        width: 24px !important;
        height: 24px !important;
        margin: 0 !important;
        padding: 0 !important;
        background-color: transparent !important;
        background-image: url("/Images/Flow/Icons/Icons_chevron-left-bg.svg") !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;
        background-size: 24px 24px !important;
        clip-path: none !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-shell__heading,
    #of-home-ctn[data-results-state="empty"] .of-results-shell__heading {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 0 !important;
        height: 100% !important;
        text-align: center !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-shell__title,
    #of-home-ctn[data-results-state="empty"] .of-results-shell__title {
        display: block !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--ayvens-theme-brand-secondary-400, #0f3549) !important;
        font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif) !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 20px !important;
        letter-spacing: 0.2px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        border: 0 !important;
        background: transparent !important;
    }
}

/* Pass 10.33: keep the T5 desktop results header/footer visible and render a single back icon.
   Restores the internal results header after the experimental single-header rule and avoids the doubled chevron. */
@media (min-width: 1280px) {
    #of-home-ctn[data-results-state="ready"] .of-results-shell__header,
    #of-home-ctn[data-results-state="empty"] .of-results-shell__header {
        display: grid !important;
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        grid-template-columns: 72px minmax(0, 1fr) 72px !important;
        align-items: center !important;
        width: 100% !important;
        height: var(--of-responsive-shell-header-height, 64px) !important;
        min-height: var(--of-responsive-shell-header-height, 64px) !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        border-bottom: 1px solid rgba(15, 53, 73, 0.06) !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-home__results,
    #of-home-ctn[data-results-state="empty"] .of-home__results {
        grid-template-rows: var(--of-responsive-shell-header-height, 64px) minmax(0, 1fr) var(--of-responsive-shell-footer-height, 32px) !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-shell__body,
    #of-home-ctn[data-results-state="empty"] .of-results-shell__body {
        grid-row: 2 !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-shell__footer,
    #of-home-ctn[data-results-state="empty"] .of-results-shell__footer {
        display: flex !important;
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-shell__back,
    #of-home-ctn[data-results-state="empty"] .of-results-shell__back {
        appearance: none !important;
        -webkit-appearance: none !important;
        position: relative !important;
        grid-column: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        justify-self: start !important;
        width: 44px !important;
        height: 44px !important;
        margin: 0 0 0 24px !important;
        padding: 0 !important;
        color: var(--ayvens-theme-brand-secondary-400, #0f3549) !important;
        background: transparent !important;
        background-image: none !important;
        border: 0 !important;
        box-shadow: none !important;
        outline: none !important;
        overflow: hidden !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-shell__back span,
    #of-home-ctn[data-results-state="empty"] .of-results-shell__back span {
        display: none !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-shell__back::before,
    #of-home-ctn[data-results-state="empty"] .of-results-shell__back::before {
        content: "" !important;
        display: block !important;
        width: 14px !important;
        height: 14px !important;
        border-left: 4px solid currentColor !important;
        border-bottom: 4px solid currentColor !important;
        transform: rotate(45deg) !important;
        border-radius: 1px !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-shell__back::after,
    #of-home-ctn[data-results-state="empty"] .of-results-shell__back::after {
        display: none !important;
        content: none !important;
    }
}

/* Pass 11.22: tablet portrait results hide search body and use full results area. */
@media (min-width: 740px) and (max-width: 959px) and (orientation: portrait) {
    #of-home-ctn[data-results-state="ready"],
    #of-home-ctn[data-results-state="empty"] {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: var(--of-responsive-shell-header-height, 64px) minmax(0, 1fr) var(--of-responsive-shell-footer-height, 32px) !important;
        column-gap: 0 !important;
        row-gap: 0 !important;
        width: 100% !important;
        height: calc(100dvh - var(--of-header-height, 64px) - (var(--of-layout-margin, 24px) * 2)) !important;
        min-height: 560px !important;
        overflow: hidden !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-home__search,
    #of-home-ctn[data-results-state="empty"] .of-home__search {
        display: contents !important;
        min-height: 0 !important;
        height: auto !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-search-shell__header,
    #of-home-ctn[data-results-state="empty"] .of-search-shell__header {
        grid-column: 1 !important;
        grid-row: 1 !important;
        z-index: 30 !important;
        display: grid !important;
        width: 100% !important;
        min-height: var(--of-responsive-shell-header-height, 64px) !important;
        height: var(--of-responsive-shell-header-height, 64px) !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-search-shell__body,
    #of-home-ctn[data-results-state="empty"] .of-search-shell__body {
        display: none !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-search-shell__footer,
    #of-home-ctn[data-results-state="empty"] .of-search-shell__footer {
        grid-column: 1 !important;
        grid-row: 3 !important;
        z-index: 30 !important;
        display: flex !important;
        min-height: var(--of-responsive-shell-footer-height, 32px) !important;
        height: var(--of-responsive-shell-footer-height, 32px) !important;
        padding: 6px 24px !important;
        font-size: 12px !important;
        line-height: 16px !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 !important;
        grid-row: 2 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-shell__body,
    #of-home-ctn[data-results-state="empty"] .of-results-shell__body {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-home__results-map,
    #of-home-ctn[data-results-state="empty"] .of-home__results-map {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        height: 100% !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-home__results-partners,
    #of-home-ctn[data-results-state="empty"] .of-home__results-partners {
        right: 18px !important;
        bottom: 18px !important;
        left: 18px !important;
        z-index: 20 !important;
        max-height: 144px !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-shell__change-location {
        display: inline-flex !important;
        bottom: 202px !important;
    }

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

/* Pass 11.23: tablet portrait results back reveals preserved search panel. */
@media (min-width: 740px) and (max-width: 959px) and (orientation: portrait) {
    #of-home-ctn[data-results-state="ready"][data-tablet-portrait-search="visible"],
    #of-home-ctn[data-results-state="empty"][data-tablet-portrait-search="visible"] {
        display: grid !important;
        grid-template-columns: clamp(300px, 40vw, 340px) minmax(0, 1fr) !important;
        grid-template-rows: var(--of-responsive-shell-header-height, 64px) minmax(0, 1fr) var(--of-responsive-shell-footer-height, 32px) !important;
        column-gap: 0 !important;
        row-gap: 0 !important;
        overflow: hidden !important;
    }

    #of-home-ctn[data-results-state="ready"][data-tablet-portrait-search="visible"] .of-home__search,
    #of-home-ctn[data-results-state="empty"][data-tablet-portrait-search="visible"] .of-home__search {
        display: contents !important;
        min-height: 0 !important;
        height: auto !important;
    }

    #of-home-ctn[data-results-state="ready"][data-tablet-portrait-search="visible"] .of-search-shell__header,
    #of-home-ctn[data-results-state="empty"][data-tablet-portrait-search="visible"] .of-search-shell__header {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        z-index: 30 !important;
        display: grid !important;
        width: 100% !important;
    }

    #of-home-ctn[data-results-state="ready"][data-tablet-portrait-search="visible"] .of-search-shell__body,
    #of-home-ctn[data-results-state="empty"][data-tablet-portrait-search="visible"] .of-search-shell__body {
        display: grid !important;
        grid-column: 1 !important;
        grid-row: 2 !important;
        align-content: start !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 24px 20px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background: var(--ayvens-theme-neutral-neutral-100, #f6f6f6) !important;
        box-sizing: border-box !important;
    }

    #of-home-ctn[data-results-state="ready"][data-tablet-portrait-search="visible"] .of-search-shell__footer,
    #of-home-ctn[data-results-state="empty"][data-tablet-portrait-search="visible"] .of-search-shell__footer {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        display: flex !important;
    }

    #of-home-ctn[data-results-state="ready"][data-tablet-portrait-search="visible"] .of-home__results,
    #of-home-ctn[data-results-state="empty"][data-tablet-portrait-search="visible"] .of-home__results {
        display: grid !important;
        grid-column: 2 !important;
        grid-row: 2 !important;
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    #of-home-ctn[data-results-state="ready"][data-tablet-portrait-search="visible"] .of-results-shell__body,
    #of-home-ctn[data-results-state="empty"][data-tablet-portrait-search="visible"] .of-results-shell__body {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    #of-home-ctn[data-results-state="ready"][data-tablet-portrait-search="visible"] .of-home__results-map,
    #of-home-ctn[data-results-state="empty"][data-tablet-portrait-search="visible"] .of-home__results-map {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        height: 100% !important;
    }

    #of-home-ctn[data-results-state="ready"][data-tablet-portrait-search="visible"] .of-home__results-partners,
    #of-home-ctn[data-results-state="empty"][data-tablet-portrait-search="visible"] .of-home__results-partners {
        right: 14px !important;
        bottom: 14px !important;
        left: 14px !important;
        z-index: 20 !important;
        max-height: 136px !important;
    }

    #of-home-ctn[data-results-state="ready"][data-tablet-portrait-search="visible"] .of-results-shell__change-location {
        bottom: 164px !important;
    }

    #of-home-ctn[data-results-state="empty"][data-tablet-portrait-search="visible"] .of-results-shell__change-location {
        bottom: 24px !important;
    }
}

/* Pass 11.25: tablet portrait partner detail must override results search reveal. */
@media (min-width: 740px) and (max-width: 959px) and (orientation: portrait) {
    #of-home-ctn[data-current-stage="partner-detail"] {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(0, 1fr) !important;
        width: 100% !important;
        height: calc(100dvh - var(--of-header-height, 64px) - (var(--of-layout-margin, 24px) * 2)) !important;
        min-height: 560px !important;
        overflow: hidden !important;
    }

    #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 {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail {
        display: grid !important;
        visibility: visible !important;
        pointer-events: auto !important;
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        min-height: 0 !important;
    }
}

/* Pass 11.26: tablet portrait partner detail is a closeable detail layer, not a search back step. */
@media (min-width: 740px) and (max-width: 959px) and (orientation: portrait) {
    #of-home-ctn[data-current-stage="partner-detail"] {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(0, 1fr) !important;
        width: 100% !important;
        height: 100dvh !important;
        min-height: 0 !important;
        background: var(--of-flow-page-bg, #f6f6f6) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    #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 {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: grid !important;
        grid-template-rows: var(--of-responsive-shell-header-height, 64px) minmax(0, 1fr) var(--of-responsive-shell-footer-height, 32px) !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        background: var(--of-flow-page-bg, #f6f6f6) !important;
        border: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        visibility: visible !important;
        pointer-events: auto !important;
        box-sizing: border-box !important;
    }
}

/* Pass 11.27: tablet portrait partner detail stable full-area stage. */
@media (min-width: 740px) and (max-width: 959px) and (orientation: portrait) {
    #of-home-ctn[data-current-stage="partner-detail"] {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: none !important;
        height: 100dvh !important;
        min-height: 0 !important;
        background: var(--of-flow-page-bg, #f6f6f6) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    #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 {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: grid !important;
        grid-template-rows: var(--of-responsive-shell-header-height, 64px) minmax(0, 1fr) var(--of-responsive-shell-footer-height, 32px) !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        background: var(--of-flow-page-bg, #f6f6f6) !important;
        border: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        visibility: visible !important;
        pointer-events: auto !important;
        box-sizing: border-box !important;
    }

    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail[hidden],
    #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail[aria-hidden="true"] {
        display: none !important;
    }
}

/* Pass 11.28: tablet header service title typography standard. */
@media (min-width: 740px) and (max-width: 1199px) {
    #of-home-ctn[data-results-state="ready"] .of-results-shell__heading,
    #of-home-ctn[data-results-state="empty"] .of-results-shell__heading {
        justify-content: center !important;
        text-align: center !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-shell__title,
    #of-home-ctn[data-results-state="empty"] .of-results-shell__title {
        font-size: 16px !important;
        line-height: 20px !important;
        letter-spacing: 0.2px !important;
        text-align: center !important;
    }
}

/* Pass 11.33: tablet header title uses the same absolute vertical center in search and results. */
@media (min-width: 740px) and (max-width: 1199px) {
    body.of-body #of-home-ctn .of-search-shell--step-title .of-search-shell__header,
    body.of-body #of-home-ctn[data-results-state="ready"] .of-results-shell__header,
    body.of-body #of-home-ctn[data-results-state="empty"] .of-results-shell__header {
        position: relative !important;
        align-items: center !important;
    }

    body.of-body #of-home-ctn .of-search-shell--step-title .of-search-shell__logo,
    body.of-body #of-home-ctn[data-results-state="ready"] .of-results-shell__title,
    body.of-body #of-home-ctn[data-results-state="empty"] .of-results-shell__title {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 112px) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--ayvens-theme-brand-secondary-400, #0f3549) !important;
        font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif) !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 20px !important;
        letter-spacing: 0.2px !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        background: none !important;
        background-image: none !important;
        box-sizing: border-box !important;
    }

    body.of-body #of-home-ctn[data-results-state="ready"] .of-results-shell__heading,
    body.of-body #of-home-ctn[data-results-state="empty"] .of-results-shell__heading {
        position: static !important;
        display: block !important;
        height: 100% !important;
    }
}

/* Pass 11.34: XL header title keeps the same vertical center as tablet/results. */
@media (min-width: 1280px) {
    body.of-body #of-home-ctn .of-search-shell--step-title .of-search-shell__header,
    body.of-body #of-home-ctn[data-results-state="ready"] .of-results-shell__header,
    body.of-body #of-home-ctn[data-results-state="empty"] .of-results-shell__header {
        position: relative !important;
        align-items: center !important;
    }

    body.of-body #of-home-ctn .of-search-shell--step-title .of-search-shell__logo,
    body.of-body #of-home-ctn[data-results-state="ready"] .of-results-shell__title,
    body.of-body #of-home-ctn[data-results-state="empty"] .of-results-shell__title {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 112px) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--ayvens-theme-brand-secondary-400, #0f3549) !important;
        font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif) !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 20px !important;
        letter-spacing: 0.2px !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        background: none !important;
        background-image: none !important;
        box-sizing: border-box !important;
    }

    body.of-body #of-home-ctn[data-results-state="ready"] .of-results-shell__heading,
    body.of-body #of-home-ctn[data-results-state="empty"] .of-results-shell__heading {
        position: static !important;
        display: block !important;
        height: 100% !important;
    }
}

/* Pass 11.36: shared responsive service header normalization.
   Source of truth for tablet/desktop service-title headers across search, results, detail and booking. */
@media (min-width: 740px) {
    body.of-body #of-home-ctn {
        --of-shared-service-header-height: 64px;
        --of-shared-service-header-title-size: 16px;
        --of-shared-service-header-title-line-height: 20px;
        --of-shared-service-header-title-letter-spacing: 0.2px;
        --of-shared-service-header-side-x: 32px;
    }

    body.of-body #of-home-ctn .of-search-shell__header,
    body.of-body #of-home-ctn .of-results-shell__header,
    body.of-body #of-home-ctn .of-partner-detail__header,
    body.of-body #of-home-ctn #of-booking-panel .of-booking__header {
        min-height: var(--of-shared-service-header-height) !important;
        height: var(--of-shared-service-header-height) !important;
        max-height: var(--of-shared-service-header-height) !important;
        box-sizing: border-box !important;
    }

    body.of-body #of-home-ctn .of-search-shell__header,
    body.of-body #of-home-ctn .of-results-shell__header,
    body.of-body #of-home-ctn .of-partner-detail__header {
        position: relative !important;
        display: grid !important;
        align-items: center !important;
        grid-template-columns: 44px minmax(0, 1fr) 44px !important;
        padding: 0 var(--of-shared-service-header-side-x) !important;
        background: #ffffff !important;
        border-radius: 0 !important;
    }

    body.of-body #of-home-ctn .of-search-shell--step-title .of-search-shell__logo,
    body.of-body #of-home-ctn .of-results-shell__title,
    body.of-body #of-home-ctn .of-partner-detail__title,
    body.of-body #of-home-ctn #of-booking-panel .of-booking__title {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100vw - 144px) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--ayvens-theme-brand-secondary-400, #0f3549) !important;
        font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif) !important;
        font-size: var(--of-shared-service-header-title-size) !important;
        font-weight: 700 !important;
        line-height: var(--of-shared-service-header-title-line-height) !important;
        letter-spacing: var(--of-shared-service-header-title-letter-spacing) !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-indent: 0 !important;
        background: none !important;
        background-image: none !important;
        box-sizing: border-box !important;
    }

    body.of-body #of-home-ctn .of-results-shell__heading {
        position: static !important;
        display: block !important;
        width: auto !important;
        height: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.of-body #of-home-ctn .of-search-shell__back,
    body.of-body #of-home-ctn .of-results-shell__back,
    body.of-body #of-home-ctn .of-partner-detail__back {
        align-self: center !important;
        justify-self: start !important;
    }

    body.of-body #of-home-ctn .of-search-shell__header-spacer,
    body.of-body #of-home-ctn .of-partner-detail__header-spacer {
        align-self: center !important;
        justify-self: end !important;
    }
}

/* Pass 11.37: canonical tablet/desktop service header title alignment. */
@media (min-width: 740px) {
    body.of-body #of-home-ctn {
        --of-canonical-service-header-height: 64px;
        --of-canonical-service-title-size: 16px;
        --of-canonical-service-title-line-height: 20px;
        --of-canonical-service-title-letter-spacing: 0.2px;
    }

    body.of-body #of-home-ctn .of-search-shell--step-title .of-search-shell__header,
    body.of-body #of-home-ctn[data-results-state="ready"] .of-results-shell__header,
    body.of-body #of-home-ctn[data-results-state="empty"] .of-results-shell__header,
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__header,
    body.of-body #of-home-ctn[data-current-stage="booking"] > #of-booking-panel.of-booking .of-booking__header {
        position: relative !important;
        min-height: var(--of-canonical-service-header-height) !important;
        height: var(--of-canonical-service-header-height) !important;
        max-height: var(--of-canonical-service-header-height) !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    body.of-body #of-home-ctn .of-search-shell--step-title .of-search-shell__logo,
    body.of-body #of-home-ctn[data-results-state="ready"] .of-results-shell__title,
    body.of-body #of-home-ctn[data-results-state="empty"] .of-results-shell__title,
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__title,
    body.of-body #of-home-ctn[data-current-stage="booking"] > #of-booking-panel.of-booking .of-booking__title {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100vw - 144px) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--ayvens-theme-brand-secondary-400, #0f3549) !important;
        font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif) !important;
        font-size: var(--of-canonical-service-title-size) !important;
        font-weight: 700 !important;
        line-height: var(--of-canonical-service-title-line-height) !important;
        letter-spacing: var(--of-canonical-service-title-letter-spacing) !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-indent: 0 !important;
        background: none !important;
        background-image: none !important;
        box-sizing: border-box !important;
    }

    body.of-body #of-home-ctn[data-results-state="ready"] .of-results-shell__heading,
    body.of-body #of-home-ctn[data-results-state="empty"] .of-results-shell__heading {
        position: static !important;
        display: block !important;
        width: auto !important;
        height: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Pass 11.38: pin tablet/desktop service header title to viewport center.
   This removes horizontal drift caused by search/results/detail using different layout containers. */
@media (min-width: 740px) {
    body.of-body #of-home-ctn .of-search-shell--step-title .of-search-shell__logo,
    body.of-body #of-home-ctn[data-results-state="ready"] #of-results-shell-title.of-results-shell__title,
    body.of-body #of-home-ctn[data-results-state="empty"] #of-results-shell-title.of-results-shell__title,
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] #of-partner-detail-shell-title.of-partner-detail__title,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-shell-title.of-booking__title {
        position: fixed !important;
        left: 50vw !important;
        top: 32px !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        z-index: 10020 !important;
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100vw - 144px) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--ayvens-theme-brand-secondary-400, #0f3549) !important;
        font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif) !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 20px !important;
        letter-spacing: 0.2px !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-indent: 0 !important;
        background: none !important;
        background-image: none !important;
        box-sizing: border-box !important;
        pointer-events: none !important;
    }
}


/* Pass 11.48: client feedback - first-step logo aligns with the content column only when there is no back action.
   Other steps keep the canonical back/title/spacer grid. */
body.of-body #of-home-ctn[data-current-step="plate"] #of-search-panel.of-search-shell:not(.of-search-shell--step-title) .of-search-shell__header {
    grid-template-columns: minmax(0, 1fr) !important;
    padding-left: var(--of-flow-content-x, 35px) !important;
    padding-right: var(--of-flow-content-x, 35px) !important;
}

body.of-body #of-home-ctn[data-current-step="plate"] #of-search-panel.of-search-shell:not(.of-search-shell--step-title) .of-search-shell__logo {
    grid-column: 1 !important;
    justify-self: start !important;
    background-position: left center !important;
}

body.of-body #of-home-ctn[data-current-step="plate"] #of-search-panel.of-search-shell:not(.of-search-shell--step-title) .of-search-shell__back,
body.of-body #of-home-ctn[data-current-step="plate"] #of-search-panel.of-search-shell:not(.of-search-shell--step-title) .of-search-shell__header-spacer {
    display: none !important;
}


/* Pass 11.59: canonical tablet/desktop back action position.
   Keep the header back affordance pinned to the same viewport position across search, results and detail. */
@media (min-width: 740px) {
    body.of-body #of-home-ctn .of-search-shell--step-title .of-search-shell__back,
    body.of-body #of-home-ctn[data-results-state="ready"] .of-results-shell__back,
    body.of-body #of-home-ctn[data-results-state="empty"] .of-results-shell__back,
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__back {
        position: fixed !important;
        left: 36px !important;
        top: 32px !important;
        z-index: 10021 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        justify-self: auto !important;
        align-self: auto !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--ayvens-theme-brand-secondary-400, #0f3549) !important;
        background: transparent !important;
        background-image: none !important;
        border: 0 !important;
        border-radius: 999px !important;
        box-shadow: none !important;
        outline: none !important;
        overflow: visible !important;
        transform: translateY(-50%) !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    body.of-body #of-home-ctn .of-search-shell--step-title .of-search-shell__back span,
    body.of-body #of-home-ctn[data-results-state="ready"] .of-results-shell__back span,
    body.of-body #of-home-ctn[data-results-state="empty"] .of-results-shell__back span,
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__back span {
        display: block !important;
        width: 24px !important;
        height: 24px !important;
        margin: 0 !important;
        padding: 0 !important;
        background-color: transparent !important;
        background-image: url("/Images/Flow/Icons/Icons_chevron-left-bg.svg") !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;
        background-size: 24px 24px !important;
        border: 0 !important;
        clip-path: none !important;
        transform: none !important;
    }

    body.of-body #of-home-ctn[data-results-state="ready"] .of-results-shell__back::before,
    body.of-body #of-home-ctn[data-results-state="empty"] .of-results-shell__back::before,
    body.of-body #of-home-ctn[data-results-state="ready"] .of-results-shell__back::after,
    body.of-body #of-home-ctn[data-results-state="empty"] .of-results-shell__back::after {
        display: none !important;
        content: none !important;
    }
}

/* Pass 11.78: mobile first step logo centered.
   Desktop/tablet keep pass 11.48 left alignment for the plate step; only XS mobile centers the brand. */
@media (max-width: 479px) {
    body.of-body #of-home-ctn[data-current-step="plate"] #of-search-panel.of-search-shell:not(.of-search-shell--step-title) .of-search-shell__header {
        grid-template-columns: minmax(0, 1fr) !important;
        justify-items: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.of-body #of-home-ctn[data-current-step="plate"] #of-search-panel.of-search-shell:not(.of-search-shell--step-title) .of-search-shell__logo {
        grid-column: 1 !important;
        justify-self: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        background-position: center center !important;
    }
}

/* AXAWHATSAPP/APP-DRIVER header alignment: keep the results header hidden while the flow is still in search mode.
   The results header is only allowed to appear after a real results/empty state. */
@media (min-width: 740px) {
    body.of-body #of-home-ctn[data-current-stage="search"]:not([data-results-state="ready"]):not([data-results-state="empty"]) .of-results-shell__header,
    body.of-body #of-home-ctn[data-current-stage="search"]:not([data-results-state="ready"]):not([data-results-state="empty"]) .of-results-shell__footer {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    body.of-body #of-home-ctn[data-current-stage="search"]:not([data-results-state="ready"]):not([data-results-state="empty"]) .of-results-shell__body {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
}


/* Phase 12: tablet results use the results shell as the single header/footer.
   This avoids the duplicated back/title created by keeping search and results headers visible at the same time. */
@media (min-width: 740px) and (max-width: 1279px) {
    #of-home-ctn[data-results-state="ready"] .of-home__results,
    #of-home-ctn[data-results-state="empty"] .of-home__results {
        display: contents !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-search-shell__header,
    #of-home-ctn[data-results-state="empty"] .of-search-shell__header,
    #of-home-ctn[data-results-state="ready"] .of-search-shell__footer,
    #of-home-ctn[data-results-state="empty"] .of-search-shell__footer {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-shell__header,
    #of-home-ctn[data-results-state="empty"] .of-results-shell__header {
        display: grid !important;
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        grid-template-columns: 72px minmax(0, 1fr) 72px !important;
        align-items: center !important;
        width: 100% !important;
        height: var(--of-responsive-shell-header-height, 64px) !important;
        min-height: var(--of-responsive-shell-header-height, 64px) !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        border-bottom: 1px solid rgba(15, 53, 73, 0.06) !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-shell__body,
    #of-home-ctn[data-results-state="empty"] .of-results-shell__body {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        grid-column: 2 !important;
        grid-row: 2 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-map-view,
    #of-home-ctn[data-results-state="empty"] .of-results-map-view {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-map-view .of-home__results-map,
    #of-home-ctn[data-results-state="empty"] .of-results-map-view .of-home__results-map {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-desktop-list-view,
    #of-home-ctn[data-results-state="empty"] .of-results-desktop-list-view {
        display: contents !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-results-shell__footer,
    #of-home-ctn[data-results-state="empty"] .of-results-shell__footer {
        display: flex !important;
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        width: 100% !important;
        height: var(--of-responsive-shell-footer-height, 32px) !important;
        min-height: var(--of-responsive-shell-footer-height, 32px) !important;
        max-height: var(--of-responsive-shell-footer-height, 32px) !important;
        z-index: 30 !important;
    }
}

@media (min-width: 740px) and (max-width: 959px) and (orientation: portrait) {
    #of-home-ctn[data-results-state="ready"] .of-results-shell__body,
    #of-home-ctn[data-results-state="empty"] .of-results-shell__body {
        grid-column: 1 !important;
    }

    #of-home-ctn[data-results-state="ready"] .of-search-shell__body,
    #of-home-ctn[data-results-state="empty"] .of-search-shell__body {
        display: none !important;
    }

    #of-home-ctn[data-results-state="ready"][data-tablet-portrait-search="visible"] .of-search-shell__body,
    #of-home-ctn[data-results-state="empty"][data-tablet-portrait-search="visible"] .of-search-shell__body {
        display: grid !important;
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    #of-home-ctn[data-results-state="ready"][data-tablet-portrait-search="visible"] .of-results-shell__body,
    #of-home-ctn[data-results-state="empty"][data-tablet-portrait-search="visible"] .of-results-shell__body {
        grid-column: 2 !important;
    }
}

/* Phase 13: tablet shell height contract.
   Keep the footer pinned to the bottom of the viewport by making the active shell
   a real header / content / footer grid. The map/content row owns the remaining
   height instead of allowing the footer to follow short content. */
@media (min-width: 740px) and (max-width: 1279px) {
    body.of-body .of-main {
        height: 100dvh;
        min-height: 100dvh;
        overflow: hidden;
    }

    body.of-body #of-home-ctn.of-home {
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    body.of-body #of-home-ctn[data-results-state="ready"],
    body.of-body #of-home-ctn[data-results-state="empty"] {
        height: 100%;
        min-height: 0;
        grid-template-rows: var(--of-responsive-shell-header-height, 64px) minmax(0, 1fr) var(--of-responsive-shell-footer-height, 32px);
        overflow: hidden;
    }

    body.of-body #of-home-ctn[data-results-state="ready"] .of-results-shell__body,
    body.of-body #of-home-ctn[data-results-state="empty"] .of-results-shell__body {
        height: auto;
        min-height: 0;
        align-self: stretch;
        overflow: hidden;
    }

    body.of-body #of-home-ctn[data-results-state="ready"] .of-results-map-view,
    body.of-body #of-home-ctn[data-results-state="empty"] .of-results-map-view,
    body.of-body #of-home-ctn[data-results-state="ready"] .of-results-map-view .of-home__results-map,
    body.of-body #of-home-ctn[data-results-state="empty"] .of-results-map-view .of-home__results-map {
        height: 100%;
        min-height: 0;
    }

    body.of-body #of-home-ctn[data-results-state="ready"] .of-results-shell__footer,
    body.of-body #of-home-ctn[data-results-state="empty"] .of-results-shell__footer {
        align-self: end;
        flex: 0 0 var(--of-responsive-shell-footer-height, 32px);
    }
}

/* Phase 14: tablet shell footer hard contract.
   Keep header/content/footer inside the active viewport for tablet sizes.
   This deliberately targets only the shell rows and leaves cards/map styling untouched. */
@media (min-width: 740px) and (max-width: 1279px) {
    body.of-body,
    body.of-body .of-main {
        height: 100dvh !important;
        min-height: 100dvh !important;
        overflow: hidden !important;
    }

    body.of-body #of-home-ctn.of-home {
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    body.of-body #of-home-ctn[data-results-state="ready"],
    body.of-body #of-home-ctn[data-results-state="empty"] {
        grid-template-rows: var(--of-responsive-shell-header-height, 64px) minmax(0, 1fr) var(--of-responsive-shell-footer-height, 32px) !important;
    }

    body.of-body #of-home-ctn[data-results-state="ready"] .of-results-shell__body,
    body.of-body #of-home-ctn[data-results-state="empty"] .of-results-shell__body {
        grid-row: 2 !important;
        align-self: stretch !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    body.of-body #of-home-ctn[data-results-state="ready"] .of-results-map-view,
    body.of-body #of-home-ctn[data-results-state="empty"] .of-results-map-view,
    body.of-body #of-home-ctn[data-results-state="ready"] .of-results-map-view .of-home__results-map,
    body.of-body #of-home-ctn[data-results-state="empty"] .of-results-map-view .of-home__results-map {
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    body.of-body #of-home-ctn[data-results-state="ready"] .of-results-shell__footer,
    body.of-body #of-home-ctn[data-results-state="empty"] .of-results-shell__footer {
        grid-row: 3 !important;
        align-self: stretch !important;
        height: var(--of-responsive-shell-footer-height, 32px) !important;
        min-height: var(--of-responsive-shell-footer-height, 32px) !important;
        max-height: var(--of-responsive-shell-footer-height, 32px) !important;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: minmax(0, 1fr) !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: grid !important;
        grid-template-rows: var(--of-responsive-shell-header-height, 64px) minmax(0, 1fr) var(--of-responsive-shell-footer-height, 32px) !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__header {
        grid-row: 1 !important;
        height: var(--of-responsive-shell-header-height, 64px) !important;
        min-height: var(--of-responsive-shell-header-height, 64px) !important;
        max-height: var(--of-responsive-shell-header-height, 64px) !important;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__body {
        grid-row: 2 !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__footer {
        grid-row: 3 !important;
        align-self: stretch !important;
        height: var(--of-responsive-shell-footer-height, 32px) !important;
        min-height: var(--of-responsive-shell-footer-height, 32px) !important;
        max-height: var(--of-responsive-shell-footer-height, 32px) !important;
        border-radius: 0 !important;
    }
}

/* Phase 16: tablet partner detail single footer.
   When the detail stage is active, the search/results footers from the previous shell
   must not remain visible underneath the detail footer. */
@media (min-width: 740px) and (max-width: 1279px) {
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] .of-search-shell__footer,
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] .of-results-shell__footer {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }
}


/* Phase 17: tablet detail shell final contract.
   Tablet detail has no page scroll: header + body + one footer inside the viewport. */
@media (min-width: 740px) and (max-width: 1279px) {
    html,
    body.of-body {
        height: 100%;
        overflow: hidden;
    }

    body.of-body .of-main {
        height: 100dvh;
        min-height: 100dvh;
        overflow: hidden;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] {
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail {
        display: grid;
        grid-template-rows: var(--of-responsive-shell-header-height, 64px) minmax(0, 1fr) var(--of-responsive-shell-footer-height, 32px);
        height: 100%;
        min-height: 0;
        max-height: 100%;
        padding: 0;
        overflow: hidden;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__body {
        grid-row: 2;
        min-height: 0;
        overflow: hidden;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__footer {
        position: static;
        grid-row: 3;
        width: 100%;
        min-width: 0;
        max-width: none;
        height: var(--of-responsive-shell-footer-height, 32px);
        min-height: var(--of-responsive-shell-footer-height, 32px);
        max-height: var(--of-responsive-shell-footer-height, 32px);
        margin: 0;
    }
}

/* Phase 18: tablet partner detail uses the contextual desktop model.
   The detail is an overlay on top of the existing results/map shell, not a standalone white page. */
@media (min-width: 740px) and (max-width: 1279px) {
    body.of-body,
    body.of-body .of-main,
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] {
        height: 100dvh;
        min-height: 100dvh;
        overflow: hidden;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        width: 100%;
        max-width: none;
        background: var(--of-flow-page-bg, #f6f6f6);
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-home__search,
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-booking {
        display: none;
        visibility: hidden;
        pointer-events: none;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-home__results {
        grid-column: 1;
        grid-row: 1;
        display: grid;
        visibility: visible;
        pointer-events: auto;
        width: 100%;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-home__results .of-results-shell,
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-home__results .of-results-shell__body,
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-home__results .of-home__results-map {
        min-height: 0;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-home__results .of-results-shell {
        display: grid;
        grid-template-rows: var(--of-responsive-shell-header-height, 64px) minmax(0, 1fr) var(--of-responsive-shell-footer-height, 32px);
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-home__results .of-results-shell__body {
        display: grid;
        grid-row: 2;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-home__results .of-home__results-map {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        height: 100%;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-home__results .of-home__results-partners {
        display: none;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail {
        position: absolute;
        z-index: 40;
        left: clamp(24px, 5vw, 64px);
        top: calc(var(--of-responsive-shell-header-height, 64px) + 20px);
        display: block;
        width: min(360px, calc(100% - 48px));
        max-width: 360px;
        min-height: 0;
        height: auto;
        max-height: calc(100dvh - var(--of-responsive-shell-header-height, 64px) - var(--of-responsive-shell-footer-height, 32px) - 40px);
        margin: 0;
        color: var(--of-flow-brand-color, #0f3549);
        background: #ffffff;
        border: 0;
        border-radius: 6px;
        box-shadow: 0 16px 38px rgba(15, 53, 73, 0.20);
        overflow: hidden;
        visibility: visible;
        pointer-events: auto;
        box-sizing: border-box;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail[hidden],
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail[aria-hidden="true"] {
        display: none;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__header,
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__footer,
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-wireframe-title,
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__service {
        display: none;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__body {
        display: grid;
        min-height: 0;
        padding: 0;
        background: transparent;
        overflow-x: hidden;
        overflow-y: auto;
        box-sizing: border-box;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__card {
        position: relative;
        display: grid;
        gap: 16px;
        width: 100%;
        margin: 0;
        padding: 48px 18px 18px;
        background: #ffffff;
        border: 0;
        border-radius: 6px 6px 0 0;
        box-shadow: none;
        box-sizing: border-box;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__close {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        padding: 0;
        color: var(--of-flow-brand-color, #0f3549);
        background: transparent;
        border: 0;
        border-radius: 999px;
        cursor: pointer;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__close span,
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__close::before,
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__close::after {
        content: "";
        position: absolute;
        display: block;
        width: 16px;
        height: 2px;
        background: currentColor;
        border-radius: 2px;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__close span {
        display: none;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__close::before {
        transform: rotate(45deg);
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__close::after {
        transform: rotate(-45deg);
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__classification {
        position: absolute;
        top: 14px;
        right: 48px;
        max-width: 150px;
        min-height: 24px;
        margin: 0;
        padding: 3px 8px;
        font-size: 12px;
        font-weight: 600;
        line-height: 18px;
        border-radius: 2px;
        white-space: nowrap;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__heading,
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__heading-main {
        display: grid;
        gap: 0;
        min-width: 0;
        margin: 0;
        padding: 0;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__name {
        font-size: 19px;
        font-weight: 600;
        line-height: 24px;
        letter-spacing: 0.25px;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__info-list {
        display: grid;
        gap: 12px;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__info-row {
        display: grid;
        grid-template-columns: 24px minmax(0, 1fr);
        gap: 10px;
        align-items: start;
        min-height: 0;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__info-row[hidden] {
        display: none;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__info-icon {
        width: 21px;
        height: 21px;
        margin-top: 1px;
        object-fit: contain;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__info-row--distance .of-partner-detail__info-icon,
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__info-row--phone .of-partner-detail__info-icon {
        width: 22px;
        height: 22px;
        margin-top: 0;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__info-row--address .of-partner-detail__info-icon {
        width: 18px;
        height: 18px;
        margin-top: 2px;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__info-row--schedule .of-partner-detail__info-icon {
        width: 20px;
        height: 20px;
        margin-top: 1px;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__info-content {
        gap: 1px;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__info-label {
        font-size: 12px;
        font-weight: 500;
        line-height: 16px;
        letter-spacing: 0.15px;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__info-value {
        font-size: 13px;
        font-weight: 500;
        line-height: 18px;
        letter-spacing: 0.1px;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        margin: 0;
        padding: 0 18px 18px;
        background: #ffffff;
        box-sizing: border-box;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__action {
        flex: 1 1 0;
        min-width: 0;
        min-height: 38px;
        padding: 8px 12px;
        gap: 6px;
        font-size: 13px;
        font-weight: 600;
        line-height: 18px;
        border-radius: 999px;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__action-icon {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
    }
}

/* Phase 19: tablet partner detail full-screen overlay (mobile-like).
   Final tablet contract: no outer scroll, one detail shell only, footer at viewport bottom. */
@media (min-width: 740px) and (max-width: 1279px) {
    html,
    body.of-body {
        height: 100%;
        overflow: hidden;
    }

    body.of-body .of-main {
        height: 100dvh;
        min-height: 100dvh;
        max-height: 100dvh;
        overflow: hidden;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        width: 100%;
        max-width: none;
        height: 100%;
        min-height: 0;
        max-height: 100%;
        background: var(--of-flow-page-bg, #f6f6f6);
        overflow: hidden;
        box-sizing: border-box;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-home__search,
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-home__results,
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-booking {
        display: none;
        visibility: hidden;
        pointer-events: none;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail {
        grid-column: 1;
        grid-row: 1;
        position: relative;
        inset: auto;
        display: grid;
        grid-template-rows: var(--of-responsive-shell-header-height, 64px) minmax(0, 1fr) var(--of-responsive-shell-footer-height, 32px);
        width: 100%;
        max-width: none;
        height: 100%;
        min-height: 0;
        max-height: 100%;
        margin: 0;
        padding: 0;
        color: var(--of-flow-brand-color, #0f3549);
        background: var(--of-flow-page-bg, #f6f6f6);
        border: 0;
        border-radius: 0;
        box-shadow: none;
        overflow: hidden;
        visibility: visible;
        pointer-events: auto;
        box-sizing: border-box;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail[hidden],
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail[aria-hidden="true"] {
        display: none;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__header {
        grid-row: 1;
        display: grid;
        height: var(--of-responsive-shell-header-height, 64px);
        min-height: var(--of-responsive-shell-header-height, 64px);
        max-height: var(--of-responsive-shell-header-height, 64px);
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__body {
        grid-row: 2;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        justify-items: center;
        min-height: 0;
        height: auto;
        padding: 24px 24px 0;
        background: transparent;
        overflow: hidden;
        box-sizing: border-box;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__card {
        width: min(620px, 100%);
        max-width: 620px;
        margin: 0 auto;
        box-sizing: border-box;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__actions {
        width: min(620px, 100%);
        max-width: 620px;
        margin: 22px auto 0;
        padding: 0;
        justify-content: center;
        box-sizing: border-box;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__footer {
        position: static;
        grid-row: 3;
        display: flex;
        width: 100%;
        min-width: 0;
        max-width: none;
        height: var(--of-responsive-shell-footer-height, 32px);
        min-height: var(--of-responsive-shell-footer-height, 32px);
        max-height: var(--of-responsive-shell-footer-height, 32px);
        margin: 0;
        border-radius: 0;
        box-sizing: border-box;
        overflow: hidden;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] .of-search-shell__footer,
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] .of-results-shell__footer,
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] .of-wireframe-title,
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] .of-partner-detail__service {
        display: none;
        visibility: hidden;
        height: 0;
        min-height: 0;
        max-height: 0;
        overflow: hidden;
        pointer-events: none;
    }
}


/* 20260616 client feedback: process screens must not show the legal footer.
   Kept as a narrow visual rule to avoid changing flow architecture before final validation. */
#of-home-ctn[data-current-stage="damage"] .of-search-shell__footer,
#of-home-ctn[data-current-stage="location"] .of-search-shell__footer,
#of-home-ctn[data-current-stage="results"] .of-results-shell__footer,
#of-home-ctn[data-current-stage="partner-detail"] .of-partner-detail__footer,
#of-home-ctn[data-current-stage="booking"] .of-booking__footer {
    display: none !important;
}

/* 20260616 client feedback: Devolução does not use mobility. */
#of-booking-panel[data-service-id="INSP"] #of-booking-mobility-field {
    display: none !important;
}

/* 20260616 client feedback: reduce over-bold labels/titles without refactoring typography. */
.of-flow-title,
.of-flow-list-title,
.of-flow-list-item__title,
.of-search-service-group__title,
.of-search-location__title,
.of-search-location-option__title,
.of-booking-details__section-title,
.of-booking-summary__section-title {
    letter-spacing: normal;
    font-weight: 500;
}

/* 20260616 pass2: tablet landscape partner detail actions and badge/close spacing. */
@media (min-width: 740px) and (max-width: 1279px) {
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__body {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-content: start;
        justify-items: center;
        row-gap: 22px;
        padding: 24px 24px 0;
        overflow-x: hidden;
        overflow-y: auto;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__actions {
        display: flex !important;
        grid-row: 2;
        width: min(620px, 100%);
        max-width: 620px;
        margin: 0 auto;
        padding: 0;
        align-items: center;
        justify-content: center;
        gap: 12px;
        overflow: visible;
        visibility: visible;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__action:not([hidden]) {
        display: inline-flex !important;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__classification {
        top: 14px;
        right: 64px;
        max-width: calc(100% - 132px);
        z-index: 1;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__close {
        top: 10px;
        right: 14px;
        z-index: 3;
    }
}

/* 20260616 pass3: tablet landscape partner detail must match portrait.
   The 960-1279 band was still inheriting a constrained detail shell that could leave
   the action row out of the visible tablet landscape area. Keep this scoped to
   partner-detail and do not touch results/booking/AXA functional flows. */
@media (min-width: 960px) and (max-width: 1279px) {
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail {
        display: grid !important;
        grid-template-rows: var(--of-responsive-shell-header-height, 64px) minmax(0, 1fr) !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__body {
        grid-row: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 22px !important;
        min-height: 0 !important;
        height: 100% !important;
        padding: 24px 24px 32px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__card {
        flex: 0 0 auto !important;
        width: min(620px, 100%) !important;
        max-width: 620px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__actions {
        flex: 0 0 auto !important;
        display: flex !important;
        position: static !important;
        width: min(620px, 100%) !important;
        max-width: 620px !important;
        min-height: 50px !important;
        height: auto !important;
        margin: 0 auto !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        background: transparent !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
        pointer-events: auto !important;
        box-sizing: border-box !important;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__action:not([hidden]) {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__footer {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }
}

/* 20260616 pass4: tablet portrait partner-detail must not render any legal footer.
   Complements pass3 landscape fix. Scope is only partner-detail on Velocity M. */
@media (min-width: 740px) and (max-width: 959px) {
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail {
        display: grid !important;
        grid-template-rows: var(--of-responsive-shell-header-height, 64px) minmax(0, 1fr) !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__body {
        grid-row: 2 !important;
        min-height: 0 !important;
        height: 100% !important;
        padding-bottom: 32px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__footer,
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] .of-search-shell__footer,
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] .of-results-shell__footer {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }
}


/* 20260616 pass5: partner-detail tablet final hard stop.
   The detail stage is part of the full-screen process, so no legal footer is rendered
   and the contextual card close must not overlap the classification badge on tablet. */
@media (min-width: 740px) and (max-width: 1279px) {
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail {
        grid-template-rows: var(--of-responsive-shell-header-height, 64px) minmax(0, 1fr) !important;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__footer,
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] .of-partner-detail__footer,
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] footer.of-partner-detail__footer {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__close {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__classification {
        right: 24px !important;
        max-width: calc(100% - 48px) !important;
    }
}

/* 20260616 pass6: tablet back from results must not leave the process footer/header shell behind.
   Use the real current step/results state, because the search shell keeps data-current-stage=search. */
#of-home-ctn[data-current-step="damage"] .of-search-shell__footer,
#of-home-ctn[data-current-step="location"] .of-search-shell__footer,
#of-home-ctn[data-results-state="ready"] .of-results-shell__footer,
#of-home-ctn[data-results-state="empty"] .of-results-shell__footer {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* 20260616 pass15: mobile results map must own the bottom when the legal footer is hidden.
   The footer is not shown inside APP-DRIVER/process results; remove the reserved footer row so the map reaches the viewport bottom. */
@media (max-width: 479px) {
    body.of-body #of-home-ctn[data-results-state="ready"] > #of-results-panel.of-home__results,
    body.of-body #of-home-ctn[data-results-state="empty"] > #of-results-panel.of-home__results {
        grid-template-rows: var(--of-flow-header-height, 88px) minmax(0, 1fr) !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    body.of-body #of-home-ctn[data-results-state="ready"] > #of-results-panel.of-home__results .of-results-shell__body,
    body.of-body #of-home-ctn[data-results-state="empty"] > #of-results-panel.of-home__results .of-results-shell__body {
        grid-row: 2 !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    body.of-body #of-home-ctn[data-results-state="ready"] > #of-results-panel.of-home__results .of-results-map-view,
    body.of-body #of-home-ctn[data-results-state="empty"] > #of-results-panel.of-home__results .of-results-map-view,
    body.of-body #of-home-ctn[data-results-state="ready"] > #of-results-panel.of-home__results .of-results-map-view .of-home__results-map,
    body.of-body #of-home-ctn[data-results-state="empty"] > #of-results-panel.of-home__results .of-results-map-view .of-home__results-map,
    body.of-body #of-home-ctn[data-results-state="ready"] > #of-results-panel.of-home__results .of-results-map-view .of-map-shell,
    body.of-body #of-home-ctn[data-results-state="empty"] > #of-results-panel.of-home__results .of-results-map-view .of-map-shell,
    body.of-body #of-home-ctn[data-results-state="ready"] > #of-results-panel.of-home__results .of-results-map-view .of-map-canvas,
    body.of-body #of-home-ctn[data-results-state="empty"] > #of-results-panel.of-home__results .of-results-map-view .of-map-canvas {
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
    }
}

/* Pass 23: client feedback - service-selection header keeps only the back chevron.
   The service selection step must not show the Ayvens logo in the shell header. */
body.of-body #of-home-ctn[data-current-step="service"] #of-search-panel.of-search-shell .of-search-shell__logo {
    visibility: hidden !important;
    color: transparent !important;
    background: none !important;
    background-image: none !important;
    text-indent: -9999px !important;
    pointer-events: none !important;
}

/* 20260617 pass28: tablet partner detail must not clip the card actions.
   The previous tablet shell could compute the detail body too short when the
   footer/header rows were overridden. Keep the detail as a full-screen stage
   and give the body the viewport height that remains below the header. */
@media (min-width: 740px) and (max-width: 1279px) {
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] {
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail {
        display: grid !important;
        grid-template-rows: var(--of-responsive-shell-header-height, 64px) minmax(0, calc(100dvh - var(--of-responsive-shell-header-height, 64px))) !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__body {
        grid-row: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 22px !important;
        width: 100% !important;
        min-height: 0 !important;
        height: calc(100dvh - var(--of-responsive-shell-header-height, 64px)) !important;
        max-height: calc(100dvh - var(--of-responsive-shell-header-height, 64px)) !important;
        padding: 24px 24px 48px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__card,
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__actions {
        flex: 0 0 auto !important;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__actions {
        position: relative !important;
        z-index: 3 !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
    }

    body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__footer,
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] .of-partner-detail__footer,
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] .of-results-shell__footer,
    body.of-body #of-home-ctn[data-current-stage="partner-detail"] .of-search-shell__footer {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }
}

/* 20260617 pass36: close from full-screen process returns to service selection,
   and process shells must use the full viewport height after the legal footer is hidden. */
@media (min-width: 740px) {
    body.of-body--web #of-home-ctn[data-current-step="damage"],
    body.of-body--web #of-home-ctn[data-current-step="location"],
    body.of-body--web #of-home-ctn[data-results-state="ready"],
    body.of-body--web #of-home-ctn[data-results-state="empty"] {
        grid-template-rows: var(--of-responsive-shell-header-height, 64px) minmax(0, 1fr) !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    body.of-body--web #of-home-ctn[data-current-step="damage"] .of-search-shell__footer,
    body.of-body--web #of-home-ctn[data-current-step="location"] .of-search-shell__footer,
    body.of-body--web #of-home-ctn[data-results-state="ready"] .of-results-shell__footer,
    body.of-body--web #of-home-ctn[data-results-state="empty"] .of-results-shell__footer {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    body.of-body--web #of-home-ctn[data-current-step="damage"] .of-search-shell__body,
    body.of-body--web #of-home-ctn[data-current-step="location"] .of-search-shell__body,
    body.of-body--web #of-home-ctn[data-results-state="ready"] .of-results-shell__body,
    body.of-body--web #of-home-ctn[data-results-state="empty"] .of-results-shell__body {
        grid-row: 2 !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
    }

    body.of-body--web #of-home-ctn[data-current-step="damage"] .of-home__results,
    body.of-body--web #of-home-ctn[data-current-step="location"] .of-home__results,
    body.of-body--web #of-home-ctn[data-results-state="ready"] .of-home__results,
    body.of-body--web #of-home-ctn[data-results-state="empty"] .of-home__results,
    body.of-body--web #of-home-ctn[data-current-step="damage"] .of-results-map-view,
    body.of-body--web #of-home-ctn[data-current-step="location"] .of-results-map-view,
    body.of-body--web #of-home-ctn[data-results-state="ready"] .of-results-map-view,
    body.of-body--web #of-home-ctn[data-results-state="empty"] .of-results-map-view,
    body.of-body--web #of-home-ctn[data-current-step="damage"] .of-home__results-map,
    body.of-body--web #of-home-ctn[data-current-step="location"] .of-home__results-map,
    body.of-body--web #of-home-ctn[data-results-state="ready"] .of-home__results-map,
    body.of-body--web #of-home-ctn[data-results-state="empty"] .of-home__results-map,
    body.of-body--web #of-home-ctn[data-current-step="damage"] .of-map-shell,
    body.of-body--web #of-home-ctn[data-current-step="location"] .of-map-shell,
    body.of-body--web #of-home-ctn[data-results-state="ready"] .of-map-shell,
    body.of-body--web #of-home-ctn[data-results-state="empty"] .of-map-shell,
    body.of-body--web #of-home-ctn[data-current-step="damage"] .of-map-canvas,
    body.of-body--web #of-home-ctn[data-current-step="location"] .of-map-canvas,
    body.of-body--web #of-home-ctn[data-results-state="ready"] .of-map-canvas,
    body.of-body--web #of-home-ctn[data-results-state="empty"] .of-map-canvas {
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
    }
}

/* 20260617 pass40: WEB full-screen results must not reserve the hidden legal footer row.
   The footer is hidden in this process state; keep only header + content so the map/list reach the viewport bottom. */
@media (min-width: 740px) {
    body.of-body--web #of-home-ctn[data-results-state="ready"] > #of-results-panel.of-home__results,
    body.of-body--web #of-home-ctn[data-results-state="empty"] > #of-results-panel.of-home__results {
        grid-template-rows: var(--of-responsive-shell-header-height, 64px) minmax(0, 1fr) !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    body.of-body--web #of-home-ctn[data-results-state="ready"] > #of-results-panel.of-home__results > .of-results-shell__body,
    body.of-body--web #of-home-ctn[data-results-state="empty"] > #of-results-panel.of-home__results > .of-results-shell__body {
        grid-row: 2 !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
    }

    body.of-body--web #of-home-ctn[data-results-state="ready"] > #of-results-panel.of-home__results > .of-results-shell__footer,
    body.of-body--web #of-home-ctn[data-results-state="empty"] > #of-results-panel.of-home__results > .of-results-shell__footer {
        display: none !important;
        visibility: hidden !important;
        grid-row: auto !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }
}


/* 20260617 pass53: keep the WEB tablet/desktop legal footer as the last grid row on the initial search screen.
   The legacy fixed footer could leave a visible gap against the bottom edge; the responsive shell owns the footer row here. */
@media (min-width: 740px) {
    body.of-body--web #of-home-ctn[data-current-stage="search"]:not([data-current-step="damage"]):not([data-current-step="location"]):not([data-results-state="ready"]):not([data-results-state="empty"]) {
        display: grid !important;
        grid-template-rows: var(--of-responsive-shell-header-height, 64px) minmax(0, 1fr) var(--of-responsive-shell-footer-height, 32px) !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    body.of-body--web #of-home-ctn[data-current-stage="search"]:not([data-current-step="damage"]):not([data-current-step="location"]):not([data-results-state="ready"]):not([data-results-state="empty"]) > #of-search-panel.of-home__search .of-search-shell__footer {
        position: static !important;
        inset: auto !important;
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        align-self: stretch !important;
        display: flex !important;
        width: 100% !important;
        min-height: var(--of-responsive-shell-footer-height, 32px) !important;
        height: var(--of-responsive-shell-footer-height, 32px) !important;
        max-height: var(--of-responsive-shell-footer-height, 32px) !important;
        margin: 0 !important;
        padding: 6px 24px !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    body.of-body--web #of-home-ctn[data-current-stage="search"]:not([data-current-step="damage"]):not([data-current-step="location"]):not([data-results-state="ready"]):not([data-results-state="empty"]) > #of-search-panel.of-home__search .of-search-shell__body,
    body.of-body--web #of-home-ctn[data-current-stage="search"]:not([data-current-step="damage"]):not([data-current-step="location"]):not([data-results-state="ready"]):not([data-results-state="empty"]) > #of-results-panel.of-home__results {
        grid-row: 2 !important;
        min-height: 0 !important;
        height: 100% !important;
    }
}

/* 20260617 pass57: mobile homepage logo follows the left content rail. */
@media (max-width: 479px) {
    body.of-body #of-home-ctn[data-current-step="plate"] #of-search-panel.of-search-shell:not(.of-search-shell--step-title) .of-search-shell__header {
        justify-items: start !important;
        padding-left: var(--of-flow-content-x, 35px) !important;
        padding-right: var(--of-flow-content-x, 35px) !important;
    }

    body.of-body #of-home-ctn[data-current-step="plate"] #of-search-panel.of-search-shell:not(.of-search-shell--step-title) .of-search-shell__logo {
        justify-self: start !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        background-position: left center !important;
    }
}

/* 20260617 pass64: mobile/tablet horizontal result cards clip at the viewport/map edge.
   The result-card rail is intentionally horizontal below desktop.  Keep the rail
   flush with the map bounds so partially visible cards are cut by the screen edge,
   not by an inner 10-18px inset. */
@media (max-width: 1279px) {
    body.of-body--web #of-home-ctn .of-home__results-partners {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    body.of-body--web #of-home-ctn .of-home__results-partners > .of-wireframe-footer {
        width: 100% !important;
        max-width: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    body.of-body--web #of-home-ctn .of-home__results-partners .of-results-partners-list {
        width: 100% !important;
        max-width: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        scroll-padding-left: 0 !important;
        scroll-padding-right: 0 !important;
        box-sizing: border-box !important;
    }
}

/* 20260617 pass65: tablet/mobile result-card rail uses the viewport edges, not the map-column edges.
   In touch layouts the horizontal cards are intentionally clipped by the visible screen.
   When tablet has the search/location panel visible at the left, the rail still spans the whole viewport
   so partially visible cards cut flush at the left/right edges instead of leaving an inner gutter. */
@media (max-width: 1279px) {
    body.of-body--web #of-home-ctn[data-results-state="ready"] .of-home__results-partners,
    body.of-body--web #of-home-ctn[data-results-state="empty"] .of-home__results-partners {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        pointer-events: none !important;
    }

    body.of-body--web #of-home-ctn[data-results-state="ready"] .of-home__results-partners > .of-wireframe-footer,
    body.of-body--web #of-home-ctn[data-results-state="empty"] .of-home__results-partners > .of-wireframe-footer {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        pointer-events: auto !important;
    }

    body.of-body--web #of-home-ctn[data-results-state="ready"] .of-results-partners-list,
    body.of-body--web #of-home-ctn[data-results-state="empty"] .of-results-partners-list {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        scroll-padding-left: 0 !important;
        scroll-padding-right: 0 !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 479px) {
    body.of-body--web #of-home-ctn[data-results-state="ready"] .of-home__results-partners,
    body.of-body--web #of-home-ctn[data-results-state="empty"] .of-home__results-partners {
        bottom: 24px !important;
    }
}

@media (min-width: 480px) and (max-width: 739px) {
    body.of-body--web #of-home-ctn[data-results-state="ready"] .of-home__results-partners,
    body.of-body--web #of-home-ctn[data-results-state="empty"] .of-home__results-partners {
        bottom: 16px !important;
    }
}

@media (min-width: 740px) and (max-width: 1279px) {
    body.of-body--web #of-home-ctn[data-results-state="ready"] .of-home__results-partners,
    body.of-body--web #of-home-ctn[data-results-state="empty"] .of-home__results-partners {
        bottom: 18px !important;
    }
}

/* 20260617 pass66: keep only the start/end breathing space on touch result-card rails.
   The rail itself still spans the visible viewport, so cards that are partially visible during scroll
   are clipped by the screen edge.  The first card starts with a small leading gutter and the last
   scroll position leaves the same trailing gutter on the right. */
@media (max-width: 1279px) {
    body.of-body--web #of-home-ctn[data-results-state="ready"] .of-results-partners-list,
    body.of-body--web #of-home-ctn[data-results-state="empty"] .of-results-partners-list {
        --of-touch-card-rail-edge-space: 16px;
        padding-left: var(--of-touch-card-rail-edge-space) !important;
        padding-right: var(--of-touch-card-rail-edge-space) !important;
        scroll-padding-left: var(--of-touch-card-rail-edge-space) !important;
        scroll-padding-right: var(--of-touch-card-rail-edge-space) !important;
        box-sizing: border-box !important;
    }
}

/* 20260617 pass73: keep the touch results rail inside the map area on tablet landscape.
   Pass65 intentionally let the rail span the whole viewport for portrait/mobile edge clipping,
   but landscape with the search/location panel visible must not let cards overlap the left panel. */
@media (min-width: 740px) and (max-width: 959px) and (orientation: landscape) {
    body.of-body--web #of-home-ctn[data-results-state="ready"],
    body.of-body--web #of-home-ctn[data-results-state="empty"] {
        --of-touch-results-rail-left: clamp(320px, 40vw, 360px);
    }
}

@media (min-width: 960px) and (max-width: 1279px) and (orientation: landscape) {
    body.of-body--web #of-home-ctn[data-results-state="ready"],
    body.of-body--web #of-home-ctn[data-results-state="empty"] {
        --of-touch-results-rail-left: var(--of-flow-desktop-search-width, clamp(384px, 34vw, 420px));
    }
}

@media (min-width: 740px) and (max-width: 1279px) and (orientation: landscape) {
    body.of-body--web #of-home-ctn[data-results-state="ready"] .of-home__results-partners,
    body.of-body--web #of-home-ctn[data-results-state="empty"] .of-home__results-partners {
        position: fixed !important;
        left: var(--of-touch-results-rail-left) !important;
        right: 0 !important;
        width: calc(100vw - var(--of-touch-results-rail-left)) !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        pointer-events: none !important;
        box-sizing: border-box !important;
    }

    body.of-body--web #of-home-ctn[data-results-state="ready"] .of-home__results-partners > .of-wireframe-footer,
    body.of-body--web #of-home-ctn[data-results-state="empty"] .of-home__results-partners > .of-wireframe-footer,
    body.of-body--web #of-home-ctn[data-results-state="ready"] .of-results-partners-list,
    body.of-body--web #of-home-ctn[data-results-state="empty"] .of-results-partners-list {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    body.of-body--web #of-home-ctn[data-results-state="ready"] .of-results-partners-list,
    body.of-body--web #of-home-ctn[data-results-state="empty"] .of-results-partners-list {
        --of-touch-card-rail-edge-space: 16px;
        padding-left: var(--of-touch-card-rail-edge-space) !important;
        padding-right: var(--of-touch-card-rail-edge-space) !important;
        scroll-padding-left: var(--of-touch-card-rail-edge-space) !important;
        scroll-padding-right: var(--of-touch-card-rail-edge-space) !important;
    }
}


/* 20260617 pass83: desktop results list top alignment only.
   Keep the validated card/list geometry intact; only pin the results list to the top and let it use the available column width. */
@media (min-width: 1280px) {
    body.of-body--web #of-home-ctn[data-results-state="ready"] .of-results-desktop-list-view,
    body.of-body--web #of-home-ctn[data-results-state="empty"] .of-results-desktop-list-view {
        align-content: start !important;
        align-items: start !important;
        justify-content: stretch !important;
        justify-items: stretch !important;
    }

    body.of-body--web #of-home-ctn[data-results-state="ready"] .of-results-desktop-list-view .of-home__results-partners,
    body.of-body--web #of-home-ctn[data-results-state="empty"] .of-results-desktop-list-view .of-home__results-partners {
        align-self: start !important;
        justify-self: stretch !important;
        width: 100% !important;
        max-width: none !important;
    }

    body.of-body--web #of-home-ctn[data-results-state="ready"] .of-results-desktop-list-view .of-home__results-partners > .of-wireframe-footer,
    body.of-body--web #of-home-ctn[data-results-state="empty"] .of-results-desktop-list-view .of-home__results-partners > .of-wireframe-footer,
    body.of-body--web #of-home-ctn[data-results-state="ready"] .of-results-desktop-list-view .of-results-partners-list,
    body.of-body--web #of-home-ctn[data-results-state="empty"] .of-results-desktop-list-view .of-results-partners-list {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }
}

/* 20260617 pass86: APP-DRIVER touch results rail must use the same viewport edge rules as WEB.
   APP-DRIVER does not render the legal footer, but the horizontal cards must still align with the
   visible map/viewport and not keep the old inner 12px inset from the generic mobile rule. */
@media (max-width: 1279px) {
    body.of-body--app-driver #of-home-ctn[data-results-state="ready"] .of-home__results-partners,
    body.of-body--app-driver #of-home-ctn[data-results-state="empty"] .of-home__results-partners {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        pointer-events: none !important;
    }

    body.of-body--app-driver #of-home-ctn[data-results-state="ready"] .of-home__results-partners > .of-wireframe-footer,
    body.of-body--app-driver #of-home-ctn[data-results-state="empty"] .of-home__results-partners > .of-wireframe-footer {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        pointer-events: auto !important;
    }

    body.of-body--app-driver #of-home-ctn[data-results-state="ready"] .of-results-partners-list,
    body.of-body--app-driver #of-home-ctn[data-results-state="empty"] .of-results-partners-list {
        --of-touch-card-rail-edge-space: 16px;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        margin: 0 !important;
        padding-left: var(--of-touch-card-rail-edge-space) !important;
        padding-right: var(--of-touch-card-rail-edge-space) !important;
        scroll-padding-left: var(--of-touch-card-rail-edge-space) !important;
        scroll-padding-right: var(--of-touch-card-rail-edge-space) !important;
        box-sizing: border-box !important;
    }
}

/* 20260624 pass13: WEB service process shell state.
   Service flow hides the legal footer and removes its reserved row.
   While the user is still in a search step, the right map is only a background area and must not reserve an internal results header row.
   When Back returns to service selection, JS clears this state so the public footer/header return. */
@media (min-width: 740px) {
    body.of-body--web #of-home-ctn[data-service-flow-active="true"] {
        --of-responsive-shell-footer-height: 0px;
        grid-template-rows: var(--of-responsive-shell-header-height, 64px) minmax(0, 1fr) 0px !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    body.of-body--web #of-home-ctn[data-service-flow-active="true"] .of-search-shell__footer,
    body.of-body--web #of-home-ctn[data-service-flow-active="true"] .of-results-shell__footer,
    body.of-body--web #of-home-ctn[data-service-flow-active="true"] .of-partner-detail__footer,
    body.of-body--web #of-home-ctn[data-service-flow-active="true"] .of-booking__footer {
        display: none !important;
        visibility: hidden !important;
        grid-row: 3 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    body.of-body--web #of-home-ctn[data-current-stage="search"][data-service-flow-active="true"] > #of-search-panel.of-home__search .of-search-shell__header {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
    }

    body.of-body--web #of-home-ctn[data-current-stage="search"][data-service-flow-active="true"] > #of-search-panel.of-home__search .of-search-shell__body {
        grid-column: 1 !important;
        grid-row: 2 !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
    }

    body.of-body--web #of-home-ctn[data-current-stage="search"][data-service-flow-active="true"]:not([data-results-state="ready"]):not([data-results-state="empty"]) > #of-results-panel.of-home__results {
        grid-column: 2 !important;
        grid-row: 2 !important;
        display: grid !important;
        grid-template-rows: minmax(0, 1fr) !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
    }

    body.of-body--web #of-home-ctn[data-current-stage="search"][data-service-flow-active="true"]:not([data-results-state="ready"]):not([data-results-state="empty"]) > #of-results-panel.of-home__results > .of-results-shell__header {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    body.of-body--web #of-home-ctn[data-current-stage="search"][data-service-flow-active="true"]:not([data-results-state="ready"]):not([data-results-state="empty"]) > #of-results-panel.of-home__results > .of-results-shell__body {
        grid-row: 1 !important;
        display: grid !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
    }

    body.of-body--web #of-home-ctn[data-current-stage="search"][data-service-flow-active="true"]:not([data-results-state="ready"]):not([data-results-state="empty"]) .of-results-map-view,
    body.of-body--web #of-home-ctn[data-current-stage="search"][data-service-flow-active="true"]:not([data-results-state="ready"]):not([data-results-state="empty"]) .of-home__results-map,
    body.of-body--web #of-home-ctn[data-current-stage="search"][data-service-flow-active="true"]:not([data-results-state="ready"]):not([data-results-state="empty"]) .of-map-shell,
    body.of-body--web #of-home-ctn[data-current-stage="search"][data-service-flow-active="true"]:not([data-results-state="ready"]):not([data-results-state="empty"]) .of-map-canvas {
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    body.of-body--web #of-home-ctn[data-current-stage="search"][data-service-flow-active="true"][data-results-state="ready"] > #of-results-panel.of-home__results,
    body.of-body--web #of-home-ctn[data-current-stage="search"][data-service-flow-active="true"][data-results-state="empty"] > #of-results-panel.of-home__results {
        grid-template-rows: var(--of-responsive-shell-header-height, 64px) minmax(0, 1fr) 0px !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    body.of-body--web #of-home-ctn[data-current-stage="search"][data-service-flow-active="true"][data-results-state="ready"] > #of-results-panel.of-home__results > .of-results-shell__body,
    body.of-body--web #of-home-ctn[data-current-stage="search"][data-service-flow-active="true"][data-results-state="empty"] > #of-results-panel.of-home__results > .of-results-shell__body {
        grid-row: 2 !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
    }
}

/* 20260624 pass14: mobile WEB service process must never keep the legal footer visible.
   After selecting a service, data-service-flow-active=true owns the shell; the footer row is removed
   until Back/Close returns to service selection and JS clears the active state. */
@media (max-width: 739px) {
    body.of-body--web #of-home-ctn[data-service-flow-active="true"] {
        --of-responsive-shell-footer-height: 0px;
        display: grid !important;
        grid-template-rows: var(--of-responsive-shell-header-height, 64px) minmax(0, 1fr) 0px !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    body.of-body--web #of-home-ctn[data-current-stage="search"][data-service-flow-active="true"] > #of-search-panel.of-home__search {
        display: grid !important;
        grid-template-rows: var(--of-responsive-shell-header-height, 64px) minmax(0, 1fr) 0px !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    body.of-body--web #of-home-ctn[data-current-stage="search"][data-service-flow-active="true"] > #of-search-panel.of-home__search .of-search-shell__body {
        grid-row: 2 !important;
        min-height: 0 !important;
        height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body.of-body--web #of-home-ctn[data-service-flow-active="true"] .of-search-shell__footer,
    body.of-body--web #of-home-ctn[data-service-flow-active="true"] .of-results-shell__footer,
    body.of-body--web #of-home-ctn[data-service-flow-active="true"] .of-partner-detail__footer,
    body.of-body--web #of-home-ctn[data-service-flow-active="true"] .of-booking__footer {
        display: none !important;
        visibility: hidden !important;
        grid-row: 3 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }
}

/* 20260624 pass18: mobile results must leave the search content completely.
   data-service-flow-active keeps the process shell active, but once results are ready/empty
   the search panel must not stay mounted as visible content. Otherwise the user sees the
   previous location/search header above the results header and partner selection opens over
   the wrong content. */
@media (max-width: 739px) {
    body.of-body--web #of-home-ctn[data-current-stage="search"][data-service-flow-active="true"][data-results-state="ready"] > #of-search-panel.of-home__search,
    body.of-body--web #of-home-ctn[data-current-stage="search"][data-service-flow-active="true"][data-results-state="empty"] > #of-search-panel.of-home__search {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    body.of-body--web #of-home-ctn[data-current-stage="search"][data-service-flow-active="true"][data-results-state="ready"] > #of-results-panel.of-home__results,
    body.of-body--web #of-home-ctn[data-current-stage="search"][data-service-flow-active="true"][data-results-state="empty"] > #of-results-panel.of-home__results {
        display: grid !important;
        visibility: visible !important;
        grid-column: 1 !important;
        grid-row: 1 / -1 !important;
        width: 100% !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
        pointer-events: auto !important;
    }
}

/* 20260624 pass23: search process fixed primary action.
   After the user selects a service, the search shell uses a fixed bottom action area.
   Back remains in the header; only the current step primary action is moved to this footer. */
.of-search-shell__process-footer {
    display: none;
}

.of-search-shell__process-footer[hidden] {
    display: none !important;
}

body.of-body--web #of-home-ctn[data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__process-footer {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    background: #ffffff;
    border-top: 1px solid rgba(15, 53, 73, 0.10);
    z-index: 50;
}

body.of-body--web #of-home-ctn[data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__primary-action {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    min-width: 0;
}

body.of-body--web #of-home-ctn[data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__primary-action > .of-flow-button,
body.of-body--web #of-home-ctn[data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__primary-action > .of-search-action,
body.of-body--web #of-home-ctn[data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__primary-action > .of-search-location-confirm-button {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 144px !important;
    max-width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 24px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
}

body.of-body--web #of-home-ctn[data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__primary-action .of-search-location-confirm-button {
    color: #ffffff !important;
    background: var(--of-flow-brand-color, #0f3549) !important;
    border: 1px solid var(--of-flow-brand-color, #0f3549) !important;
}

body.of-body--web #of-home-ctn[data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__primary-action .of-search-location-confirm-button::before {
    display: none !important;
    content: none !important;
}

body.of-body--web #of-home-ctn[data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__primary-action .of-search-location-confirm-button__label {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: nowrap !important;
}

body.of-body--web #of-home-ctn[data-search-primary-action-active="true"][data-current-step="location"] #of-search-location-step .of-search-location-address-input.of-flow-text-input {
    padding-right: 48px !important;
}

@media (min-width: 740px) {
    body.of-body--web #of-home-ctn[data-search-primary-action-active="true"] {
        --of-search-process-footer-height: 84px;
        --of-responsive-shell-footer-height: var(--of-search-process-footer-height);
        grid-template-rows: var(--of-responsive-shell-header-height, 64px) minmax(0, 1fr) var(--of-search-process-footer-height) !important;
    }

    body.of-body--web #of-home-ctn[data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__body {
        grid-column: 1 !important;
        grid-row: 2 !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body.of-body--web #of-home-ctn[data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__process-footer {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        height: var(--of-search-process-footer-height) !important;
        min-height: var(--of-search-process-footer-height) !important;
        max-height: var(--of-search-process-footer-height) !important;
        padding: 18px 32px !important;
    }

    body.of-body--web #of-home-ctn[data-current-stage="search"][data-search-primary-action-active="true"]:not([data-results-state="ready"]):not([data-results-state="empty"]) > #of-results-panel.of-home__results {
        grid-column: 2 !important;
        grid-row: 2 !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
    }
}

@media (max-width: 739px) {
    body.of-body--web #of-home-ctn[data-search-primary-action-active="true"] {
        --of-search-process-footer-height: 84px;
        --of-responsive-shell-footer-height: var(--of-search-process-footer-height);
        grid-template-rows: var(--of-responsive-shell-header-height, 64px) minmax(0, 1fr) var(--of-search-process-footer-height) !important;
    }

    body.of-body--web #of-home-ctn[data-current-stage="search"][data-search-primary-action-active="true"] > #of-search-panel.of-home__search {
        display: grid !important;
        grid-template-rows: var(--of-responsive-shell-header-height, 64px) minmax(0, 1fr) var(--of-search-process-footer-height) !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    body.of-body--web #of-home-ctn[data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__body {
        grid-row: 2 !important;
        min-height: 0 !important;
        height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body.of-body--web #of-home-ctn[data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__process-footer {
        grid-row: 3 !important;
        height: var(--of-search-process-footer-height) !important;
        min-height: var(--of-search-process-footer-height) !important;
        max-height: var(--of-search-process-footer-height) !important;
        padding: 16px 24px !important;
    }

    body.of-body--web #of-home-ctn[data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__primary-action > .of-flow-button,
    body.of-body--web #of-home-ctn[data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__primary-action > .of-search-action,
    body.of-body--web #of-home-ctn[data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__primary-action > .of-search-location-confirm-button {
        width: 100% !important;
        min-width: 0 !important;
    }
}

body.of-body--web #of-home-ctn[data-search-primary-action-active="true"] .of-search-process-action-origin--empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* 20260624 pass24: keep complex step controls intact when the primary action is moved.
   Location has an input, clear action and search button in the same wrapper; moving the
   primary action to the process footer must not hide the wrapper or collapse the field. */
body.of-body--web #of-home-ctn[data-search-primary-action-active="true"][data-current-step="location"] #of-search-location-step .of-search-location-address-search.of-search-process-action-origin--empty {
    position: relative !important;
    display: block !important;
    align-self: stretch !important;
    width: 100% !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 4px 4px 4px 8px !important;
    background: var(--ayvens-theme-neutral-neutral-100, #f6f6f6) !important;
    border: 2px solid var(--ayvens-theme-neutral-neutral-200, #e5e5e5) !important;
    border-radius: 28px !important;
    box-sizing: border-box !important;
}

body.of-body--web #of-home-ctn[data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__primary-action > .of-flow-button,
body.of-body--web #of-home-ctn[data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__primary-action > .of-search-action,
body.of-body--web #of-home-ctn[data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__primary-action > .of-search-location-confirm-button {
    min-width: 0 !important;
    min-height: var(--of-flow-action-height, 56px) !important;
    height: auto !important;
    padding: 12px var(--of-flow-action-padding-x, 24px) !important;
    border-radius: var(--of-flow-radius-pill, 999px) !important;
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif) !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    box-shadow: none !important;
}

body.of-body--web #of-home-ctn[data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__primary-action > .of-flow-button:not(:disabled),
body.of-body--web #of-home-ctn[data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__primary-action > .of-search-action:not(:disabled),
body.of-body--web #of-home-ctn[data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__primary-action > .of-search-location-confirm-button:not(:disabled) {
    cursor: pointer !important;
}

@media (min-width: 740px) {
    body.of-body--web #of-home-ctn[data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__primary-action > .of-flow-button,
    body.of-body--web #of-home-ctn[data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__primary-action > .of-search-action,
    body.of-body--web #of-home-ctn[data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__primary-action > .of-search-location-confirm-button {
        width: auto !important;
        min-width: 128px !important;
    }
}

@media (max-width: 739px) {
    body.of-body--web #of-home-ctn[data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__primary-action > .of-flow-button,
    body.of-body--web #of-home-ctn[data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__primary-action > .of-search-action,
    body.of-body--web #of-home-ctn[data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__primary-action > .of-search-location-confirm-button {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* 20260624 pass26: pin search process primary action to the viewport bottom.
   The post-service form steps use the header back/close and a single fixed
   primary action. The action rail must sit on the page bottom, not in the flow,
   while the central content keeps the required bottom clearance. */
body.of-body--web #of-home-ctn[data-current-stage="search"][data-search-primary-action-active="true"] {
    --of-search-process-footer-height: 84px !important;
    grid-template-rows: var(--of-responsive-shell-header-height, 64px) minmax(0, 1fr) 0px !important;
}

body.of-body--web #of-home-ctn[data-current-stage="search"][data-search-primary-action-active="true"] > #of-search-panel.of-home__search {
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
}

body.of-body--web #of-home-ctn[data-current-stage="search"][data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__body {
    min-height: 0 !important;
    padding-bottom: var(--of-search-process-footer-height) !important;
    box-sizing: border-box !important;
}

body.of-body--web #of-home-ctn[data-current-stage="search"][data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__process-footer {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1200 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: var(--of-search-process-footer-height) !important;
    min-height: var(--of-search-process-footer-height) !important;
    max-height: var(--of-search-process-footer-height) !important;
    margin: 0 !important;
    background: #ffffff !important;
    border-top: 1px solid rgba(15, 53, 73, 0.10) !important;
    box-shadow: 0 -8px 24px rgba(15, 53, 73, 0.04) !important;
    box-sizing: border-box !important;
}

body.of-body--web #of-home-ctn[data-current-stage="search"][data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__primary-action > .of-flow-button,
body.of-body--web #of-home-ctn[data-current-stage="search"][data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__primary-action > .of-search-action {
    min-width: 132px !important;
    min-height: 52px !important;
    height: 52px !important;
    padding: 0 28px !important;
    border-radius: var(--of-flow-radius-pill, 999px) !important;
    box-shadow: none !important;
}

@media (min-width: 740px) {
    body.of-body--web #of-home-ctn[data-current-stage="search"][data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__process-footer {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        padding: 16px 32px !important;
    }

    body.of-body--web #of-home-ctn[data-current-stage="search"][data-search-primary-action-active="true"]:not([data-results-state="ready"]):not([data-results-state="empty"]) > #of-results-panel.of-home__results {
        height: calc(100dvh - var(--of-responsive-shell-header-height, 64px) - var(--of-search-process-footer-height)) !important;
        max-height: calc(100dvh - var(--of-responsive-shell-header-height, 64px) - var(--of-search-process-footer-height)) !important;
        overflow: hidden !important;
    }
}

@media (max-width: 739px) {
    body.of-body--web #of-home-ctn[data-current-stage="search"][data-search-primary-action-active="true"] {
        --of-search-process-footer-height: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
        grid-template-rows: var(--of-responsive-shell-header-height, 64px) minmax(0, 1fr) 0px !important;
    }

    body.of-body--web #of-home-ctn[data-current-stage="search"][data-search-primary-action-active="true"] > #of-search-panel.of-home__search {
        grid-template-rows: var(--of-responsive-shell-header-height, 64px) minmax(0, 1fr) 0px !important;
    }

    body.of-body--web #of-home-ctn[data-current-stage="search"][data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__process-footer {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 14px 20px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.of-body--web #of-home-ctn[data-current-stage="search"][data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__primary-action > .of-flow-button,
    body.of-body--web #of-home-ctn[data-current-stage="search"][data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__primary-action > .of-search-action {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

/* 20260624 pass58: APP-DRIVER runs inside the native app shell.
   The native app owns the title/close header, so the OF webview must keep only
   the main content and the bottom navigation/actions. */
body.of-body--app-driver #of-home-ctn {
    --of-app-driver-bottom-actions-height: calc(86px + env(safe-area-inset-bottom, 0px));
}

body.of-body--app-driver #of-home-ctn .of-search-shell__footer,
body.of-body--app-driver #of-home-ctn .of-results-shell__footer,
body.of-body--app-driver #of-home-ctn .of-booking__footer,
body.of-body--app-driver #of-home-ctn .of-partner-detail__footer,
body.of-body--app-driver #of-home-ctn .of-search-shell__close,
body.of-body--app-driver #of-home-ctn .of-results-shell__close,
body.of-body--app-driver #of-home-ctn .of-partner-detail__shell-close,
body.of-body--app-driver #of-home-ctn .of-booking__header,
body.of-body--app-driver #of-home-ctn .of-booking__title,
body.of-body--app-driver #of-home-ctn .of-booking__back,
body.of-body--app-driver #of-home-ctn .of-booking__header-spacer {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

body.of-body--app-driver #of-home-ctn > #of-search-panel.of-search-shell {
    grid-template-rows: minmax(0, 1fr) 0 !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
}

body.of-body--app-driver #of-home-ctn > #of-search-panel.of-search-shell .of-search-shell__header {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

body.of-body--app-driver #of-home-ctn > #of-search-panel.of-search-shell .of-search-shell__body {
    grid-row: 1 !important;
    min-height: 0 !important;
    padding-top: 24px !important;
    padding-bottom: calc(var(--of-app-driver-bottom-actions-height) + 16px) !important;
    box-sizing: border-box !important;
}

body.of-body--app-driver #of-home-ctn[data-search-primary-action-active="true"] > #of-search-panel.of-search-shell .of-search-shell__process-footer {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 2200 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100vw !important;
    height: var(--of-app-driver-bottom-actions-height) !important;
    min-height: var(--of-app-driver-bottom-actions-height) !important;
    max-height: var(--of-app-driver-bottom-actions-height) !important;
    padding: 14px 20px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    background: var(--of-flow-page-bg, #f6f6f6) !important;
    border-top: 1px solid rgba(15, 53, 73, 0.10) !important;
    box-shadow: 0 -8px 24px rgba(15, 53, 73, 0.04) !important;
    box-sizing: border-box !important;
}

body.of-body--app-driver #of-home-ctn[data-search-primary-action-active="true"] > #of-search-panel.of-search-shell .of-search-shell__primary-action {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
}

body.of-body--app-driver #of-home-ctn[data-search-primary-action-active="true"] > #of-search-panel.of-search-shell .of-search-shell__primary-action > .of-flow-button,
body.of-body--app-driver #of-home-ctn[data-search-primary-action-active="true"] > #of-search-panel.of-search-shell .of-search-shell__primary-action > .of-search-action {
    width: auto !important;
    min-width: 132px !important;
    max-width: calc(100vw - 40px) !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 28px !important;
    border-radius: var(--of-flow-radius-pill, 999px) !important;
    box-shadow: none !important;
}

body.of-body--app-driver #of-home-ctn[data-results-state="ready"] > #of-results-panel.of-home__results,
body.of-body--app-driver #of-home-ctn[data-results-state="empty"] > #of-results-panel.of-home__results {
    grid-template-rows: minmax(0, 1fr) !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
}

body.of-body--app-driver #of-home-ctn[data-results-state="ready"] > #of-results-panel.of-home__results .of-results-shell__header,
body.of-body--app-driver #of-home-ctn[data-results-state="empty"] > #of-results-panel.of-home__results .of-results-shell__header,
body.of-body--app-driver #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__header {
    display: contents !important;
}

body.of-body--app-driver #of-home-ctn[data-results-state="ready"] > #of-results-panel.of-home__results .of-results-shell__heading,
body.of-body--app-driver #of-home-ctn[data-results-state="empty"] > #of-results-panel.of-home__results .of-results-shell__heading,
body.of-body--app-driver #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__title {
    display: none !important;
    visibility: hidden !important;
}

body.of-body--app-driver #of-home-ctn[data-results-state="ready"] > #of-results-panel.of-home__results .of-results-shell__body,
body.of-body--app-driver #of-home-ctn[data-results-state="empty"] > #of-results-panel.of-home__results .of-results-shell__body {
    grid-row: 1 !important;
    height: 100% !important;
    min-height: 0 !important;
}

body.of-body--app-driver #of-home-ctn[data-results-state="ready"] > #of-results-panel.of-home__results .of-results-shell__back,
body.of-body--app-driver #of-home-ctn[data-results-state="empty"] > #of-results-panel.of-home__results .of-results-shell__back,
body.of-body--app-driver #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__back {
    position: fixed !important;
    left: 20px !important;
    right: auto !important;
    bottom: calc(17px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 2300 !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 132px !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 28px !important;
    color: var(--of-flow-brand-color, #0f3549) !important;
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 22px !important;
    background: #ffffff !important;
    border: 1.5px solid var(--of-flow-brand-color, #0f3549) !important;
    border-radius: var(--of-flow-radius-pill, 999px) !important;
    box-shadow: none !important;
    transform: none !important;
    box-sizing: border-box !important;
}

body.of-body--app-driver #of-home-ctn[data-results-state="ready"] > #of-results-panel.of-home__results .of-results-shell__back > img,
body.of-body--app-driver #of-home-ctn[data-results-state="empty"] > #of-results-panel.of-home__results .of-results-shell__back > img,
body.of-body--app-driver #of-home-ctn[data-results-state="ready"] > #of-results-panel.of-home__results .of-results-shell__back > span,
body.of-body--app-driver #of-home-ctn[data-results-state="empty"] > #of-results-panel.of-home__results .of-results-shell__back > span,
body.of-body--app-driver #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__back > img,
body.of-body--app-driver #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__back > span {
    display: none !important;
}

body.of-body--app-driver #of-home-ctn[data-results-state="ready"] > #of-results-panel.of-home__results .of-results-shell__back::after,
body.of-body--app-driver #of-home-ctn[data-results-state="empty"] > #of-results-panel.of-home__results .of-results-shell__back::after,
body.of-body--app-driver #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__back::after {
    content: "Anterior" !important;
    display: block !important;
}

body.of-body--app-driver #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail {
    grid-template-rows: minmax(0, 1fr) !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
}

body.of-body--app-driver #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__body {
    grid-row: 1 !important;
    min-height: 0 !important;
    padding-top: 24px !important;
    padding-bottom: calc(var(--of-app-driver-bottom-actions-height) + 16px) !important;
    box-sizing: border-box !important;
}

body.of-body--app-driver #of-home-ctn[data-current-stage="booking"] > #of-booking-panel.of-booking {
    grid-template-rows: minmax(0, 1fr) !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
}

body.of-body--app-driver #of-home-ctn[data-current-stage="booking"] > #of-booking-panel.of-booking .of-booking__body {
    grid-row: 1 !important;
    min-height: 0 !important;
    padding-top: 24px !important;
    padding-bottom: calc(var(--of-app-driver-bottom-actions-height) + 16px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

body.of-body--app-driver #of-home-ctn[data-current-stage="booking"] > #of-booking-panel.of-booking .of-booking__actions--schedule,
body.of-body--app-driver #of-home-ctn[data-current-stage="booking"] > #of-booking-panel.of-booking .of-booking__actions--details,
body.of-body--app-driver #of-home-ctn[data-current-stage="booking"] > #of-booking-panel.of-booking .of-booking__actions--summary,
body.of-body--app-driver #of-home-ctn[data-current-stage="booking"] > #of-booking-panel.of-booking .of-booking__actions--confirmation {
    min-height: var(--of-app-driver-bottom-actions-height) !important;
    padding: 14px 20px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
}


/* 20260624 pass60: APP-DRIVER native-header results bottom action bar and damage-step loading.
   The app provides the header; OF keeps content plus a fixed bottom navigation/action bar. */
body.of-body--app-driver #of-home-ctn[data-results-back-visible="true"][data-results-state="ready"] > #of-results-panel.of-home__results::after,
body.of-body--app-driver #of-home-ctn[data-results-back-visible="true"][data-results-state="empty"] > #of-results-panel.of-home__results::after,
body.of-body--app-driver #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail::after {
    content: "" !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 2200 !important;
    display: block !important;
    width: 100vw !important;
    height: var(--of-app-driver-bottom-actions-height, calc(86px + env(safe-area-inset-bottom, 0px))) !important;
    min-height: var(--of-app-driver-bottom-actions-height, calc(86px + env(safe-area-inset-bottom, 0px))) !important;
    background: var(--of-flow-page-bg, #f6f6f6) !important;
    border-top: 1px solid rgba(15, 53, 73, 0.10) !important;
    box-shadow: 0 -8px 24px rgba(15, 53, 73, 0.04) !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
}

body.of-body--app-driver #of-home-ctn[data-results-back-visible="true"][data-results-state="ready"] .of-home__results-partners,
body.of-body--app-driver #of-home-ctn[data-results-back-visible="true"][data-results-state="empty"] .of-home__results-partners {
    bottom: calc(var(--of-app-driver-bottom-actions-height, calc(86px + env(safe-area-inset-bottom, 0px))) + 12px) !important;
}

body.of-body--app-driver #of-home-ctn[data-current-step="damage"] #of-search-damage-continue-btn.of-search-button--loading {
    position: relative !important;
    color: transparent !important;
    background: var(--ayvens-theme-brand-secondary-300, #3F5D6D) !important;
    border-color: var(--ayvens-theme-brand-secondary-300, #3F5D6D) !important;
    box-shadow: none !important;
    cursor: wait !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

body.of-body--app-driver #of-home-ctn[data-current-step="damage"] #of-search-damage-continue-btn.of-search-button--loading::before {
    content: "" !important;
    position: absolute !important;
    top: calc(50% - 12px) !important;
    left: calc(50% - 12px) !important;
    right: auto !important;
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    background: url("/Images/Flow/Icons/loaderframeabsolute.svg") center / 24px 24px no-repeat !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    animation: of-ayvens-loader-rotate 760ms linear infinite !important;
    rotate: 0deg;
    transform-origin: center center !important;
}

body.of-body--app-driver #of-home-ctn[data-current-step="damage"] #of-search-damage-continue-btn.of-search-button--loading::after {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    content: none !important;
}


/* PRD-037: AXAWHATSAPP can change location from results; back navigation remains disabled for this flow. */

/* 20260625 pass85: AXAWHATSAPP reuses the APP-DRIVER native-shell mechanics.
   Results differ only in not owning a bottom navigation bar; detail keeps the APP-DRIVER bottom Anterior action. */
body.of-body--axa-whatsapp #of-home-ctn[data-results-state="ready"] > #of-results-panel.of-home__results::after,
body.of-body--axa-whatsapp #of-home-ctn[data-results-state="empty"] > #of-results-panel.of-home__results::after {
    display: none !important;
    content: none !important;
}

body.of-body--axa-whatsapp #of-home-ctn[data-results-state="ready"] > #of-results-panel.of-home__results .of-results-shell__back,
body.of-body--axa-whatsapp #of-home-ctn[data-results-state="empty"] > #of-results-panel.of-home__results .of-results-shell__back {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.of-body--axa-whatsapp #of-home-ctn[data-results-state="ready"] .of-home__results-partners,
body.of-body--axa-whatsapp #of-home-ctn[data-results-state="empty"] .of-home__results-partners {
    bottom: 14px !important;
}

body.of-body--axa-whatsapp #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail,
body.of-body--axa-whatsapp #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__body {
    background: var(--of-flow-page-bg, #f6f6f6) !important;
}

/* 20260625 pass89 / 20260626 pass101: APP-DRIVER and AXAWHATSAPP direct entry
   with URL coordinates use a neutral search state instead of exposing the location form/button
   while suppliers load. */
.of-results-search-loading {
    display: none;
}

body.of-body--app-driver #of-home-ctn[data-results-state="loading"],
body.of-body--axa-whatsapp #of-home-ctn[data-results-state="loading"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
}

body.of-body--app-driver #of-home-ctn[data-results-state="loading"] > #of-search-panel.of-search-shell,
body.of-body--axa-whatsapp #of-home-ctn[data-results-state="loading"] > #of-search-panel.of-search-shell {
    display: none !important;
}

body.of-body--app-driver #of-home-ctn[data-results-state="loading"] > #of-results-panel.of-home__results,
body.of-body--axa-whatsapp #of-home-ctn[data-results-state="loading"] > #of-results-panel.of-home__results {
    position: relative !important;
    display: grid !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    grid-template-rows: minmax(0, 1fr) !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    background: var(--of-flow-page-bg, #f6f6f6) !important;
}

body.of-body--app-driver #of-home-ctn[data-results-state="loading"] > #of-results-panel.of-home__results .of-results-search-loading,
body.of-body--axa-whatsapp #of-home-ctn[data-results-state="loading"] > #of-results-panel.of-home__results .of-results-search-loading {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2600 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    width: 100% !important;
    height: 100% !important;
    padding: 24px !important;
    color: var(--ayvens-theme-brand-secondary-400, #0f3549) !important;
    text-align: center !important;
    background: var(--of-flow-page-bg, #f6f6f6) !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
}

body.of-body--app-driver #of-home-ctn[data-results-state="loading"] .of-results-search-loading__indicator,
body.of-body--axa-whatsapp #of-home-ctn[data-results-state="loading"] .of-results-search-loading__indicator {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 52px !important;
    background: var(--ayvens-theme-brand-secondary-300, #3f5d6d) !important;
    border-radius: 50% !important;
}

body.of-body--app-driver #of-home-ctn[data-results-state="loading"] .of-results-search-loading__spinner,
body.of-body--axa-whatsapp #of-home-ctn[data-results-state="loading"] .of-results-search-loading__spinner {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    background: url("/Images/Flow/Icons/loaderframeabsolute.svg") center / 24px 24px no-repeat !important;
    transform-origin: 50% 50% !important;
    animation: of-app-driver-direct-search-loader-spin 760ms linear infinite !important;
}

body.of-body--app-driver #of-home-ctn[data-results-state="loading"] .of-results-search-loading__label,
body.of-body--axa-whatsapp #of-home-ctn[data-results-state="loading"] .of-results-search-loading__label {
    display: block !important;
    color: var(--ayvens-theme-brand-secondary-400, #0f3549) !important;
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    letter-spacing: 0.2px !important;
}

@keyframes of-app-driver-direct-search-loader-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 20260625 pass92: keep the automatic AXA close attempt and expose a manual
   return action only when the WhatsApp browser keeps the page visible. */
.of-partner-detail__axa-return[hidden] {
    display: none !important;
}

body.of-body--axa-whatsapp #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail[data-axa-whatsapp-return-visible="true"] > .of-partner-detail__header,
body.of-body--axa-whatsapp #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail[data-axa-whatsapp-return-visible="true"] > .of-partner-detail__body {
    display: none !important;
}

body.of-body--axa-whatsapp #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail[data-axa-whatsapp-return-visible="true"]::after {
    display: none !important;
    content: none !important;
}

body.of-body--axa-whatsapp #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__axa-return:not([hidden]) {
    position: relative !important;
    z-index: 2400 !important;
    display: grid !important;
    grid-row: 1 !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding: 24px 20px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: var(--of-flow-page-bg, #f6f6f6) !important;
    box-sizing: border-box !important;
}

body.of-body--axa-whatsapp #of-home-ctn[data-current-stage="partner-detail"] .of-partner-detail__axa-return-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 0 auto !important;
    padding: 48px 0 24px !important;
    text-align: center !important;
}

body.of-body--axa-whatsapp #of-home-ctn[data-current-stage="partner-detail"] .of-partner-detail__axa-return-icon {
    display: block !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 0 20px !important;
}

body.of-body--axa-whatsapp #of-home-ctn[data-current-stage="partner-detail"] .of-partner-detail__axa-return-icon[hidden] {
    display: none !important;
}

body.of-body--axa-whatsapp #of-home-ctn[data-current-stage="partner-detail"] .of-partner-detail__axa-return-title {
    margin: 0 !important;
    color: var(--of-flow-brand-color, #0f3549) !important;
    font-family: var(--of-font-family-brand, Arial, Helvetica, sans-serif) !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    line-height: 30px !important;
}

body.of-body--axa-whatsapp #of-home-ctn[data-current-stage="partner-detail"] .of-partner-detail__axa-return-text {
    margin: 12px 0 0 !important;
    color: var(--ayvens-theme-neutral-neutral-700, #454747) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
}

body.of-body--axa-whatsapp #of-home-ctn[data-current-stage="partner-detail"] .of-partner-detail__axa-return-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
}

body.of-body--axa-whatsapp #of-home-ctn[data-current-stage="partner-detail"] #of-partner-detail-axa-whatsapp-return-btn {
    width: min(100%, 320px) !important;
    min-height: 52px !important;
}

body.of-body--axa-whatsapp #of-home-ctn[data-current-stage="partner-detail"] .of-partner-detail__axa-return-help {
    width: min(100%, 340px) !important;
    margin: 0 !important;
    color: var(--ayvens-theme-neutral-neutral-600, #686B6B) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    text-align: center !important;
}

/* 20260626 pass99: final AXAWHATSAPP state keeps only the outcome headline and
   the native-close instruction directly underneath. */
body.of-body--axa-whatsapp #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__axa-return:not([hidden]) {
    grid-template-rows: minmax(0, 1fr) !important;
}

body.of-body--axa-whatsapp #of-home-ctn[data-current-stage="partner-detail"] .of-partner-detail__axa-return-content {
    max-width: 370px !important;
    padding: 24px 0 !important;
}

body.of-body--axa-whatsapp #of-home-ctn[data-current-stage="partner-detail"] .of-partner-detail__axa-return-icon,
body.of-body--axa-whatsapp #of-home-ctn[data-current-stage="partner-detail"] .of-partner-detail__axa-return-actions,
body.of-body--axa-whatsapp #of-home-ctn[data-current-stage="partner-detail"] .of-partner-detail__axa-return-help {
    display: none !important;
}

body.of-body--axa-whatsapp #of-home-ctn[data-current-stage="partner-detail"] .of-partner-detail__axa-return-title {
    font-size: 26px !important;
    line-height: 32px !important;
}

body.of-body--axa-whatsapp #of-home-ctn[data-current-stage="partner-detail"] .of-partner-detail__axa-return-text {
    max-width: 360px !important;
    margin: 16px 0 0 !important;
}

/* 20260626 pass101: AXAWHATSAPP keeps the selection loader inside the CTA.
   The full-screen loader is reserved for the first automatic supplier search. */
body.of-body--axa-whatsapp #of-home-ctn[data-current-stage="partner-detail"] #of-partner-detail-axa-whatsapp-select-btn.of-partner-detail__action--loading,
body.of-body--axa-whatsapp #of-home-ctn[data-current-stage="partner-detail"] #of-partner-detail-axa-whatsapp-select-btn.of-partner-detail__action--loading:disabled,
body.of-body--axa-whatsapp #of-home-ctn[data-current-stage="partner-detail"] #of-partner-detail-axa-whatsapp-select-btn.of-partner-detail__action--loading[disabled],
body.of-body--axa-whatsapp #of-home-ctn[data-current-stage="partner-detail"] #of-partner-detail-axa-whatsapp-select-btn.of-partner-detail__action--loading[aria-disabled="true"] {
    position: relative !important;
    color: transparent !important;
    background: var(--ayvens-theme-brand-secondary-300, #3F5D6D) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    cursor: wait !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

body.of-body--axa-whatsapp #of-home-ctn[data-current-stage="partner-detail"] #of-partner-detail-axa-whatsapp-select-btn.of-partner-detail__action--loading > * {
    opacity: 0 !important;
    color: transparent !important;
}

body.of-body--axa-whatsapp #of-home-ctn[data-current-stage="partner-detail"] #of-partner-detail-axa-whatsapp-select-btn.of-partner-detail__action--loading::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    margin: -12px 0 0 -12px !important;
    background: url("/Images/Flow/Icons/loaderframeabsolute.svg") center / 24px 24px no-repeat !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform-origin: center center !important;
    animation: of-app-driver-direct-search-loader-spin 760ms linear infinite !important;
}

/* 20260629 pass120: when a search process step reuses a stored location, keep the user on the step and show the same primary-button loader until results are ready. */
body.of-body #of-home-ctn[data-current-step="damage"] #of-search-damage-continue-btn.of-search-button--loading {
    position: relative !important;
    color: transparent !important;
    background: var(--ayvens-theme-brand-secondary-300, #3F5D6D) !important;
    border-color: var(--ayvens-theme-brand-secondary-300, #3F5D6D) !important;
    box-shadow: none !important;
    cursor: wait !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

body.of-body #of-home-ctn[data-current-step="damage"] #of-search-damage-continue-btn.of-search-button--loading > * {
    opacity: 0 !important;
    color: transparent !important;
}

body.of-body #of-home-ctn[data-current-step="damage"] #of-search-damage-continue-btn.of-search-button--loading::before {
    content: "" !important;
    position: absolute !important;
    top: calc(50% - 12px) !important;
    left: calc(50% - 12px) !important;
    right: auto !important;
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    background: url("/Images/Flow/Icons/loaderframeabsolute.svg") center / 24px 24px no-repeat !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    animation: of-ayvens-loader-rotate 760ms linear infinite !important;
    rotate: 0deg;
    transform-origin: center center !important;
}

body.of-body #of-home-ctn[data-current-step="damage"] #of-search-damage-continue-btn.of-search-button--loading::after {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    content: none !important;
}

/* 20260629 pass123 / PRD-037: APP-DRIVER and AXAWHATSAPP Mudar localização balanced above the horizontal cards. */
body.of-body--app-driver #of-home-ctn[data-results-state="ready"] .of-results-map-view .of-results-shell__change-location,
body.of-body--app-driver #of-home-ctn[data-results-state="empty"] .of-results-map-view .of-results-shell__change-location {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    z-index: 90 !important;
    display: inline-flex !important;
    transform: translateX(-50%) !important;
    pointer-events: auto !important;
}

body.of-body--app-driver #of-home-ctn[data-results-back-visible="true"][data-results-state="ready"] .of-results-map-view .of-results-shell__change-location {
    bottom: calc(var(--of-app-driver-bottom-actions-height, calc(86px + env(safe-area-inset-bottom, 0px))) + 194px) !important;
}

body.of-body--app-driver #of-home-ctn[data-results-back-visible="false"][data-results-state="ready"] .of-results-map-view .of-results-shell__change-location {
    bottom: 202px !important;
}

body.of-body--app-driver #of-home-ctn[data-results-state="empty"] .of-results-map-view .of-results-shell__change-location {
    bottom: 24px !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);
}

/* Pass 18: client review typography softening.
   Keep this in the theme layer because it adjusts Ayvens visual tone only. */
:root,
[data-of-brand="ayvens"] {
    --of-typography-step-title-letter-spacing: 0;
    --of-typography-step-description-letter-spacing: 0;
    --of-flow-mobile-header-title-letter-spacing: 0;
}

body.of-body .of-flow-title,
body.of-body .of-search-section__title,
body.of-body .of-search-service__title,
body.of-body .of-search-damage__title,
body.of-body .of-search-location__title,
body.of-body .of-booking-schedule__title,
body.of-body .of-booking-details__title,
body.of-body .of-booking-summary__title,
body.of-body .of-booking-confirmation__title,
body.of-body .of-booking-confirmation__subtitle,
body.of-body .of-partner-detail__title,
body.of-body .of-results-shell__title {
    letter-spacing: 0 !important;
}

body.of-body .of-flow-text,
body.of-body .of-search-service__description,
body.of-body .of-search-damage__description,
body.of-body .of-booking-schedule__description,
body.of-body .of-booking-details__description,
body.of-body .of-booking-confirmation__text,
body.of-body .of-flow-list-item__title,
body.of-body .of-flow-list-item__description,
body.of-body .of-results-partner-card__name,
body.of-body .of-partner-detail__name,
body.of-body .of-partner-detail__label {
    letter-spacing: 0 !important;
}

body.of-body .of-flow-vehicle-card__title,
body.of-body .of-flow-list-title,
body.of-body .of-search-location-current-label,
body.of-body .of-search-location-separator strong,
body.of-body .of-search-location-address-field .of-flow-field__label,
body.of-body .of-booking-details__section-title,
body.of-body .of-booking-summary__section-title,
body.of-body .of-booking-summary__value,
body.of-body .of-booking-summary__contact-list dd,
body.of-body .of-booking-confirmation__title,
body.of-body .of-booking-confirmation__subtitle,
body.of-body .of-booking-confirmation__close,
body.of-body .of-results-partner-card__name,
body.of-body .of-partner-detail__name {
    font-weight: 500 !important;
}

/* Pass 24: client feedback - use Velocity chevron-left icon for shell back buttons. */
body.of-body .of-search-shell__back > span,
body.of-body .of-results-shell__back > span,
body.of-body .of-partner-detail__back-icon,
body.of-body #of-booking-panel .of-booking__back-icon {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: transparent !important;
    background-color: transparent !important;
    background-image: url("/Images/Flow/Icons/Icons_chevron-left-bg.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 24px 24px !important;
    border: 0 !important;
    clip-path: none !important;
    transform: none !important;
}

body.of-body .of-results-shell__back::before,
body.of-body .of-results-shell__back::after,
body.of-body .of-partner-detail__back-icon::before,
body.of-body .of-partner-detail__back-icon::after,
body.of-body #of-booking-panel .of-booking__back-icon::before,
body.of-body #of-booking-panel .of-booking__back-icon::after {
    content: none !important;
    display: none !important;
}

/* Pass 25: ensure the new Velocity back icon remains visible after replacing the legacy CSS chevron.
   Keep the visibility rules controlled by each flow; this only fixes the rendered glyph. */
body.of-body .of-search-shell__back > span,
body.of-body .of-results-shell__back > span,
body.of-body .of-partner-detail__back-icon,
body.of-body #of-booking-panel .of-booking__back-icon {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    background-color: transparent !important;
    background-image: url("/Images/Flow/Icons/Icons_chevron-left-bg.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 24px 24px !important;
    border: 0 !important;
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Pass 27: shell back buttons use the real Velocity SVG element, not CSS-drawn chevrons. */
body.of-body .of-shell-back-icon {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    border: 0 !important;
    background: transparent !important;
    clip-path: none !important;
    transform: none !important;
}

body.of-body .of-search-shell__back > .of-shell-back-icon,
body.of-body .of-results-shell__back > .of-shell-back-icon,
body.of-body .of-partner-detail__back > .of-shell-back-icon,
body.of-body #of-booking-panel .of-booking__back > .of-shell-back-icon {
    opacity: 1 !important;
    visibility: visible !important;
}

body.of-body .of-search-shell__back > .of-shell-back-icon::before,
body.of-body .of-search-shell__back > .of-shell-back-icon::after,
body.of-body .of-results-shell__back > .of-shell-back-icon::before,
body.of-body .of-results-shell__back > .of-shell-back-icon::after,
body.of-body .of-partner-detail__back > .of-shell-back-icon::before,
body.of-body .of-partner-detail__back > .of-shell-back-icon::after,
body.of-body #of-booking-panel .of-booking__back > .of-shell-back-icon::before,
body.of-body #of-booking-panel .of-booking__back > .of-shell-back-icon::after {
    content: none !important;
    display: none !important;
}

/* Pass 29: close controls must use the real close.svg, never a CSS-drawn chevron/X. */
body.of-body .of-shell-close-icon,
body.of-body #of-booking-panel .of-booking__close-icon,
body.of-body .of-partner-detail__close > .of-shell-close-icon {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    background: transparent !important;
    border: 0 !important;
    clip-path: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.of-body .of-partner-detail__close::before,
body.of-body .of-partner-detail__close::after,
body.of-body #of-booking-panel .of-booking__close::before,
body.of-body #of-booking-panel .of-booking__close::after,
body.of-body #of-booking-panel .of-booking__close-icon::before,
body.of-body #of-booking-panel .of-booking__close-icon::after {
    content: none !important;
    display: none !important;
}

/* Pass 30: contextual partner-detail modal close must use close.svg as a real image.
   The desktop/tablet contextual modal has older high-specificity rules that draw the X with pseudo-elements;
   override those rules here and keep only the img element visible. */
body.of-body #of-home-ctn[data-current-stage="search"] > .of-partner-detail .of-partner-detail__close,
body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__close,
body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    color: var(--of-flow-brand-color, #0f3549) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 999px !important;
    overflow: visible !important;
}

body.of-body #of-home-ctn[data-current-stage="search"] > .of-partner-detail .of-partner-detail__close::before,
body.of-body #of-home-ctn[data-current-stage="search"] > .of-partner-detail .of-partner-detail__close::after,
body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__close::before,
body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__close::after,
body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__close::before,
body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__close::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    border: 0 !important;
    transform: none !important;
}

body.of-body #of-home-ctn[data-current-stage="search"] > .of-partner-detail .of-partner-detail__close > span,
body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__close > span,
body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__close > span {
    display: none !important;
}

body.of-body #of-home-ctn[data-current-stage="search"] > .of-partner-detail .of-partner-detail__close > img.of-shell-close-icon,
body.of-body #of-home-ctn[data-current-stage="partner-detail"] > .of-partner-detail .of-partner-detail__close > img.of-shell-close-icon,
body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__close > img.of-shell-close-icon {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: transparent !important;
    border: 0 !important;
    clip-path: none !important;
    transform: none !important;
}

/* Pass 33: keep desktop contextual detail classification aligned with close.svg. */
@media (min-width: 1280px) {
    body.of-body #of-home-ctn[data-current-stage="search"] > .of-partner-detail .of-partner-detail__classification {
        position: absolute !important;
        top: 16px !important;
        right: 53px !important;
    }
}

/* Pass 34: full-screen flow shell close button uses close.svg on WEB only. */
body.of-body .of-flow-shell-close {
    align-items: center !important;
    justify-content: center !important;
    justify-self: end !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    color: var(--ayvens-theme-brand-secondary-400, #0f3549) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

body.of-body .of-flow-shell-close::before,
body.of-body .of-flow-shell-close::after,
body.of-body .of-flow-shell-close > .of-shell-close-icon::before,
body.of-body .of-flow-shell-close > .of-shell-close-icon::after {
    content: none !important;
    display: none !important;
}

body.of-body .of-flow-shell-close > .of-shell-close-icon {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    background: transparent !important;
    border: 0 !important;
    clip-path: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.of-body #of-home-ctn .of-search-shell__close,
body.of-body #of-home-ctn .of-results-shell__close,
body.of-body #of-home-ctn .of-partner-detail__shell-close {
    display: none !important;
}

body.of-body--web #of-home-ctn[data-current-step="mandatory-plate"] .of-search-shell__close,
body.of-body--web #of-home-ctn[data-current-step="return-service"] .of-search-shell__close,
body.of-body--web #of-home-ctn[data-current-step="fuel-type"] .of-search-shell__close,
body.of-body--web #of-home-ctn[data-current-step="brand"] .of-search-shell__close,
body.of-body--web #of-home-ctn[data-current-step="damage"] .of-search-shell__close,
body.of-body--web #of-home-ctn[data-current-step="location"] .of-search-shell__close,
body.of-body--web #of-home-ctn[data-results-state="ready"] .of-results-shell__close,
body.of-body--web #of-home-ctn[data-results-state="empty"] .of-results-shell__close,
body.of-body--web #of-home-ctn[data-current-stage="partner-detail"] .of-partner-detail__shell-close {
    display: inline-flex !important;
}

body.of-body #of-home-ctn[data-access-from="AXAWHATSAPP"] .of-search-shell__close,
body.of-body #of-home-ctn[data-access-from="AXAWHATSAPP"] .of-results-shell__close,
body.of-body #of-home-ctn[data-access-from="AXAWHATSAPP"] .of-partner-detail__shell-close,
body.of-body--app-driver #of-home-ctn .of-search-shell__close,
body.of-body--app-driver #of-home-ctn .of-results-shell__close,
body.of-body--app-driver #of-home-ctn .of-partner-detail__shell-close {
    display: none !important;
}

/* Pass 35: pin full-screen close action to the right side of the shell header.
   The close button must be independent from the left back button and must always use close.svg. */
@media (max-width: 739px) {
    body.of-body--web #of-home-ctn[data-current-step="mandatory-plate"] .of-search-shell__close,
    body.of-body--web #of-home-ctn[data-current-step="fuel-type"] .of-search-shell__close,
    body.of-body--web #of-home-ctn[data-current-step="brand"] .of-search-shell__close,
    body.of-body--web #of-home-ctn[data-current-step="damage"] .of-search-shell__close,
    body.of-body--web #of-home-ctn[data-current-step="location"] .of-search-shell__close,
    body.of-body--web #of-home-ctn[data-results-state="ready"] .of-results-shell__close,
    body.of-body--web #of-home-ctn[data-results-state="empty"] .of-results-shell__close,
    body.of-body--web #of-home-ctn[data-current-stage="partner-detail"] .of-partner-detail__shell-close {
        position: fixed !important;
        top: 44px !important;
        right: 18px !important;
        left: auto !important;
        bottom: auto !important;
        z-index: 10022 !important;
        display: inline-flex !important;
        transform: translateY(-50%) !important;
    }
}

@media (min-width: 740px) {
    body.of-body--web #of-home-ctn[data-current-step="mandatory-plate"] .of-search-shell__close,
    body.of-body--web #of-home-ctn[data-current-step="fuel-type"] .of-search-shell__close,
    body.of-body--web #of-home-ctn[data-current-step="brand"] .of-search-shell__close,
    body.of-body--web #of-home-ctn[data-current-step="damage"] .of-search-shell__close,
    body.of-body--web #of-home-ctn[data-current-step="location"] .of-search-shell__close,
    body.of-body--web #of-home-ctn[data-results-state="ready"] .of-results-shell__close,
    body.of-body--web #of-home-ctn[data-results-state="empty"] .of-results-shell__close,
    body.of-body--web #of-home-ctn[data-current-stage="partner-detail"] .of-partner-detail__shell-close {
        position: fixed !important;
        top: 32px !important;
        right: 36px !important;
        left: auto !important;
        bottom: auto !important;
        z-index: 10022 !important;
        display: inline-flex !important;
        transform: translateY(-50%) !important;
    }
}

body.of-body #of-home-ctn[data-access-from="AXAWHATSAPP"] .of-search-shell__close,
body.of-body #of-home-ctn[data-access-from="AXAWHATSAPP"] .of-results-shell__close,
body.of-body #of-home-ctn[data-access-from="AXAWHATSAPP"] .of-partner-detail__shell-close,
body.of-body--app-driver #of-home-ctn .of-search-shell__close,
body.of-body--app-driver #of-home-ctn .of-results-shell__close,
body.of-body--app-driver #of-home-ctn .of-partner-detail__shell-close {
    display: none !important;
}

/* 20260617 pass38: keep the full-screen close button aligned inside the shell header.
   The previous fixed positioning made the close.svg drift vertically on mobile/tablet. */
body.of-body--web #of-home-ctn[data-current-step="mandatory-plate"] .of-search-shell__close,
body.of-body--web #of-home-ctn[data-current-step="return-service"] .of-search-shell__close,
body.of-body--web #of-home-ctn[data-current-step="fuel-type"] .of-search-shell__close,
body.of-body--web #of-home-ctn[data-current-step="brand"] .of-search-shell__close,
body.of-body--web #of-home-ctn[data-current-step="damage"] .of-search-shell__close,
body.of-body--web #of-home-ctn[data-current-step="location"] .of-search-shell__close,
body.of-body--web #of-home-ctn[data-results-state="ready"] .of-results-shell__close,
body.of-body--web #of-home-ctn[data-results-state="empty"] .of-results-shell__close,
body.of-body--web #of-home-ctn[data-current-stage="partner-detail"] .of-partner-detail__shell-close {
    position: static !important;
    inset: auto !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    display: inline-flex !important;
    transform: none !important;
    z-index: auto !important;
}

body.of-body--web #of-home-ctn[data-current-step="mandatory-plate"] .of-search-shell__close > .of-shell-close-icon,
body.of-body--web #of-home-ctn[data-current-step="return-service"] .of-search-shell__close > .of-shell-close-icon,
body.of-body--web #of-home-ctn[data-current-step="fuel-type"] .of-search-shell__close > .of-shell-close-icon,
body.of-body--web #of-home-ctn[data-current-step="brand"] .of-search-shell__close > .of-shell-close-icon,
body.of-body--web #of-home-ctn[data-current-step="damage"] .of-search-shell__close > .of-shell-close-icon,
body.of-body--web #of-home-ctn[data-current-step="location"] .of-search-shell__close > .of-shell-close-icon,
body.of-body--web #of-home-ctn[data-results-state="ready"] .of-results-shell__close > .of-shell-close-icon,
body.of-body--web #of-home-ctn[data-results-state="empty"] .of-results-shell__close > .of-shell-close-icon,
body.of-body--web #of-home-ctn[data-current-stage="partner-detail"] .of-partner-detail__shell-close > .of-shell-close-icon {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    transform: none !important;
}

/* 20260617 pass45: Velocity button states for primary filled and outlined buttons.
   Keep primary and outlined independent and keep the button geometry stable between states.
   The outlined visual rest border is drawn inset so hover/active can use a 2px border without moving text or siblings. */
body.of-body #of-home-ctn .of-flow-button,
body.of-body #of-home-ctn .of-search-action,
body.of-body #of-home-ctn .of-partner-detail__action,
body.of-body #of-home-ctn .of-results-partner-card__select,
body.of-body #of-home-ctn .of-results-partner-card__directions {
    box-sizing: border-box !important;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

body.of-body #of-home-ctn .of-flow-button,
body.of-body #of-home-ctn .of-search-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 24px !important;
    line-height: 24px !important;
    vertical-align: middle !important;
    border-width: 2px !important;
    border-style: solid !important;
    border-radius: 30px !important;
    transform: none !important;
}

body.of-body #of-home-ctn .of-flow-button--compact {
    padding-left: 24px !important;
    padding-right: 24px !important;
}

body.of-body #of-home-ctn .of-flow-button--primary,
body.of-body #of-home-ctn .of-search-action--primary,
body.of-body #of-home-ctn .of-partner-detail__action--primary,
body.of-body #of-home-ctn .of-results-partner-card--selected .of-results-partner-card__select,
body.of-body #of-home-ctn .of-search-location-current-button {
    color: #ffffff !important;
    background: var(--ayvens-theme-brand-secondary-400, #0F3549) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

@media (hover: hover) and (pointer: fine) {
    body.of-body #of-home-ctn .of-flow-button--primary:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
    body.of-body #of-home-ctn .of-search-action--primary:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
    body.of-body #of-home-ctn .of-partner-detail__action--primary:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
    body.of-body #of-home-ctn .of-results-partner-card--selected .of-results-partner-card__select:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
    body.of-body #of-home-ctn .of-search-location-current-button:not(:has(input:disabled)):hover {
        color: #ffffff !important;
        background: var(--ayvens-theme-brand-secondary-500, #072534) !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }
}

body.of-body #of-home-ctn .of-flow-button--primary:not(:disabled):not([disabled]):not([aria-disabled="true"]):active,
body.of-body #of-home-ctn .of-search-action--primary:not(:disabled):not([disabled]):not([aria-disabled="true"]):active,
body.of-body #of-home-ctn .of-partner-detail__action--primary:not(:disabled):not([disabled]):not([aria-disabled="true"]):active,
body.of-body #of-home-ctn .of-results-partner-card--selected .of-results-partner-card__select:not(:disabled):not([disabled]):not([aria-disabled="true"]):active,
body.of-body #of-home-ctn .of-search-location-current-button:not(:has(input:disabled)):active {
    color: #ffffff !important;
    background: var(--ayvens-theme-brand-secondary-300, #3F5D6D) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

body.of-body #of-home-ctn .of-flow-button--primary:disabled,
body.of-body #of-home-ctn .of-flow-button--primary[disabled],
body.of-body #of-home-ctn .of-flow-button--primary[aria-disabled="true"],
body.of-body #of-home-ctn .of-search-action--primary:disabled,
body.of-body #of-home-ctn .of-search-action--primary[disabled],
body.of-body #of-home-ctn .of-search-action--primary[aria-disabled="true"],
body.of-body #of-home-ctn .of-partner-detail__action--primary:disabled,
body.of-body #of-home-ctn .of-partner-detail__action--primary[disabled],
body.of-body #of-home-ctn .of-partner-detail__action--primary[aria-disabled="true"],
body.of-body #of-home-ctn .of-results-partner-card--selected .of-results-partner-card__select:disabled,
body.of-body #of-home-ctn .of-results-partner-card--selected .of-results-partner-card__select[disabled],
body.of-body #of-home-ctn .of-results-partner-card--selected .of-results-partner-card__select[aria-disabled="true"],
body.of-body #of-home-ctn .of-search-location-current-button:has(input:disabled) {
    color: var(--ayvens-theme-neutral-neutral-500, #989A9A) !important;
    background: var(--ayvens-theme-neutral-neutral-200, #EEEEEE) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

body.of-body #of-home-ctn .of-flow-button--secondary,
body.of-body #of-home-ctn .of-search-action--secondary,
body.of-body #of-home-ctn .of-partner-detail__action--secondary,
body.of-body #of-home-ctn .of-results-partner-card:not(.of-results-partner-card--selected) .of-results-partner-card__select {
    color: var(--ayvens-theme-brand-secondary-400, #0F3549) !important;
    background: var(--ayvens-theme-neutral-neutral-white, #FFFFFF) !important;
    border-color: transparent !important;
    box-shadow: inset 0 0 0 1px var(--ayvens-theme-brand-secondary-400, #0F3549) !important;
    opacity: 1 !important;
}

@media (hover: hover) and (pointer: fine) {
    body.of-body #of-home-ctn .of-flow-button--secondary:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
    body.of-body #of-home-ctn .of-search-action--secondary:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
    body.of-body #of-home-ctn .of-partner-detail__action--secondary:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
    body.of-body #of-home-ctn .of-results-partner-card:not(.of-results-partner-card--selected) .of-results-partner-card__select:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover {
        color: var(--ayvens-theme-brand-secondary-300, #3F5D6D) !important;
        background: var(--ayvens-theme-brand-secondary-50, #DBE1E4) !important;
        border-color: var(--ayvens-theme-brand-secondary-300, #3F5D6D) !important;
        box-shadow: 0 4px 8px 0 rgba(9, 30, 66, 0.08), 0 0 1px 0 rgba(9, 30, 66, 0.20) !important;
    }
}

body.of-body #of-home-ctn .of-flow-button--secondary:not(:disabled):not([disabled]):not([aria-disabled="true"]):active,
body.of-body #of-home-ctn .of-search-action--secondary:not(:disabled):not([disabled]):not([aria-disabled="true"]):active,
body.of-body #of-home-ctn .of-partner-detail__action--secondary:not(:disabled):not([disabled]):not([aria-disabled="true"]):active,
body.of-body #of-home-ctn .of-results-partner-card:not(.of-results-partner-card--selected) .of-results-partner-card__select:not(:disabled):not([disabled]):not([aria-disabled="true"]):active {
    color: var(--ayvens-theme-brand-secondary-500, #072534) !important;
    background: var(--ayvens-theme-brand-secondary-50, #DBE1E4) !important;
    border-color: var(--ayvens-theme-brand-secondary-500, #072534) !important;
    box-shadow: none !important;
}

body.of-body #of-home-ctn .of-flow-button--secondary:disabled,
body.of-body #of-home-ctn .of-flow-button--secondary[disabled],
body.of-body #of-home-ctn .of-flow-button--secondary[aria-disabled="true"],
body.of-body #of-home-ctn .of-search-action--secondary:disabled,
body.of-body #of-home-ctn .of-search-action--secondary[disabled],
body.of-body #of-home-ctn .of-search-action--secondary[aria-disabled="true"],
body.of-body #of-home-ctn .of-partner-detail__action--secondary:disabled,
body.of-body #of-home-ctn .of-partner-detail__action--secondary[disabled],
body.of-body #of-home-ctn .of-partner-detail__action--secondary[aria-disabled="true"],
body.of-body #of-home-ctn .of-results-partner-card:not(.of-results-partner-card--selected) .of-results-partner-card__select:disabled,
body.of-body #of-home-ctn .of-results-partner-card:not(.of-results-partner-card--selected) .of-results-partner-card__select[disabled],
body.of-body #of-home-ctn .of-results-partner-card:not(.of-results-partner-card--selected) .of-results-partner-card__select[aria-disabled="true"] {
    color: var(--ayvens-theme-neutral-neutral-500, #989A9A) !important;
    background: var(--ayvens-theme-neutral-neutral-200, #EEEEEE) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

/* 20260617 pass46: Velocity outlined hover/active without geometry shifts.
   Primary filled and outlined states are kept independent. The outlined 2px state is drawn inward with outline,
   so text/sibling buttons do not move when hover or active is applied. */
body.of-body #of-home-ctn .of-flow-button,
body.of-body #of-home-ctn .of-search-action,
body.of-body #of-home-ctn .of-partner-detail__action,
body.of-body #of-home-ctn .of-results-partner-card__select,
body.of-body #of-home-ctn .of-results-partner-card__directions {
    box-sizing: border-box !important;
    transform: none !important;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, outline-color 120ms ease, box-shadow 120ms ease !important;
}

body.of-body #of-home-ctn .of-flow-button--primary,
body.of-body #of-home-ctn .of-search-action--primary,
body.of-body #of-home-ctn .of-partner-detail__action--primary,
body.of-body #of-home-ctn .of-results-partner-card--selected .of-results-partner-card__select,
body.of-body #of-home-ctn .of-search-location-current-button {
    color: #ffffff !important;
    background: var(--ayvens-theme-brand-secondary-400, #0F3549) !important;
    border-color: transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

@media (hover: hover) and (pointer: fine) {
    body.of-body #of-home-ctn .of-flow-button--primary:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
    body.of-body #of-home-ctn .of-search-action--primary:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
    body.of-body #of-home-ctn .of-partner-detail__action--primary:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
    body.of-body #of-home-ctn .of-results-partner-card--selected .of-results-partner-card__select:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
    body.of-body #of-home-ctn .of-search-location-current-button:not(:has(input:disabled)):hover {
        color: #ffffff !important;
        background: var(--ayvens-theme-brand-secondary-500, #072534) !important;
        border-color: transparent !important;
        outline: 0 !important;
        box-shadow: none !important;
    }
}

body.of-body #of-home-ctn .of-flow-button--primary:not(:disabled):not([disabled]):not([aria-disabled="true"]):active,
body.of-body #of-home-ctn .of-search-action--primary:not(:disabled):not([disabled]):not([aria-disabled="true"]):active,
body.of-body #of-home-ctn .of-partner-detail__action--primary:not(:disabled):not([disabled]):not([aria-disabled="true"]):active,
body.of-body #of-home-ctn .of-results-partner-card--selected .of-results-partner-card__select:not(:disabled):not([disabled]):not([aria-disabled="true"]):active,
body.of-body #of-home-ctn .of-search-location-current-button:not(:has(input:disabled)):active {
    color: #ffffff !important;
    background: var(--ayvens-theme-brand-secondary-300, #3F5D6D) !important;
    border-color: transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
}

body.of-body #of-home-ctn .of-flow-button--primary:disabled,
body.of-body #of-home-ctn .of-flow-button--primary[disabled],
body.of-body #of-home-ctn .of-flow-button--primary[aria-disabled="true"],
body.of-body #of-home-ctn .of-search-action--primary:disabled,
body.of-body #of-home-ctn .of-search-action--primary[disabled],
body.of-body #of-home-ctn .of-search-action--primary[aria-disabled="true"],
body.of-body #of-home-ctn .of-partner-detail__action--primary:disabled,
body.of-body #of-home-ctn .of-partner-detail__action--primary[disabled],
body.of-body #of-home-ctn .of-partner-detail__action--primary[aria-disabled="true"],
body.of-body #of-home-ctn .of-results-partner-card--selected .of-results-partner-card__select:disabled,
body.of-body #of-home-ctn .of-results-partner-card--selected .of-results-partner-card__select[disabled],
body.of-body #of-home-ctn .of-results-partner-card--selected .of-results-partner-card__select[aria-disabled="true"],
body.of-body #of-home-ctn .of-search-location-current-button:has(input:disabled) {
    color: var(--ayvens-theme-neutral-neutral-500, #989A9A) !important;
    background: var(--ayvens-theme-neutral-neutral-200, #EEEEEE) !important;
    border-color: transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

body.of-body #of-home-ctn .of-flow-button--secondary,
body.of-body #of-home-ctn .of-search-action--secondary,
body.of-body #of-home-ctn .of-partner-detail__action--secondary,
body.of-body #of-home-ctn .of-results-partner-card:not(.of-results-partner-card--selected) .of-results-partner-card__select {
    color: var(--ayvens-theme-brand-secondary-400, #0F3549) !important;
    background: var(--ayvens-theme-neutral-neutral-white, #FFFFFF) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--ayvens-theme-brand-secondary-400, #0F3549) !important;
    outline: 1px solid transparent !important;
    outline-offset: -2px !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

@media (hover: hover) and (pointer: fine) {
    body.of-body #of-home-ctn .of-flow-button--secondary:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
    body.of-body #of-home-ctn .of-search-action--secondary:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
    body.of-body #of-home-ctn .of-partner-detail__action--secondary:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
    body.of-body #of-home-ctn .of-results-partner-card:not(.of-results-partner-card--selected) .of-results-partner-card__select:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover {
        color: var(--ayvens-theme-brand-secondary-300, #3F5D6D) !important;
        background: var(--ayvens-theme-brand-secondary-50, #DBE1E4) !important;
        border-width: 1px !important;
        border-color: var(--ayvens-theme-brand-secondary-300, #3F5D6D) !important;
        outline: 1px solid var(--ayvens-theme-brand-secondary-300, #3F5D6D) !important;
        outline-offset: -2px !important;
        box-shadow: 0 4px 8px 0 rgba(9, 30, 66, 0.08), 0 0 1px 0 rgba(9, 30, 66, 0.20) !important;
    }
}

body.of-body #of-home-ctn .of-flow-button--secondary:not(:disabled):not([disabled]):not([aria-disabled="true"]):active,
body.of-body #of-home-ctn .of-search-action--secondary:not(:disabled):not([disabled]):not([aria-disabled="true"]):active,
body.of-body #of-home-ctn .of-partner-detail__action--secondary:not(:disabled):not([disabled]):not([aria-disabled="true"]):active,
body.of-body #of-home-ctn .of-results-partner-card:not(.of-results-partner-card--selected) .of-results-partner-card__select:not(:disabled):not([disabled]):not([aria-disabled="true"]):active {
    color: var(--ayvens-theme-brand-secondary-500, #072534) !important;
    background: var(--ayvens-theme-brand-secondary-50, #DBE1E4) !important;
    border-width: 1px !important;
    border-color: var(--ayvens-theme-brand-secondary-500, #072534) !important;
    outline: 1px solid var(--ayvens-theme-brand-secondary-500, #072534) !important;
    outline-offset: -2px !important;
    box-shadow: 0 2px 2px 0 rgba(9, 30, 66, 0.08), 0 0 1px 0 rgba(9, 30, 66, 0.20) !important;
}

body.of-body #of-home-ctn .of-flow-button--secondary:disabled,
body.of-body #of-home-ctn .of-flow-button--secondary[disabled],
body.of-body #of-home-ctn .of-flow-button--secondary[aria-disabled="true"],
body.of-body #of-home-ctn .of-search-action--secondary:disabled,
body.of-body #of-home-ctn .of-search-action--secondary[disabled],
body.of-body #of-home-ctn .of-search-action--secondary[aria-disabled="true"],
body.of-body #of-home-ctn .of-partner-detail__action--secondary:disabled,
body.of-body #of-home-ctn .of-partner-detail__action--secondary[disabled],
body.of-body #of-home-ctn .of-partner-detail__action--secondary[aria-disabled="true"],
body.of-body #of-home-ctn .of-results-partner-card:not(.of-results-partner-card--selected) .of-results-partner-card__select:disabled,
body.of-body #of-home-ctn .of-results-partner-card:not(.of-results-partner-card--selected) .of-results-partner-card__select[disabled],
body.of-body #of-home-ctn .of-results-partner-card:not(.of-results-partner-card--selected) .of-results-partner-card__select[aria-disabled="true"] {
    color: var(--ayvens-theme-neutral-neutral-500, #989A9A) !important;
    background: var(--ayvens-theme-neutral-neutral-200, #EEEEEE) !important;
    border-width: 1px !important;
    border-color: var(--ayvens-theme-neutral-neutral-200, #EEEEEE) !important;
    outline: 1px solid transparent !important;
    outline-offset: -2px !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

/* 20260617 pass49: enforce Velocity disabled states on booking CTAs.
   Booking has legacy highly-specific disabled rules; keep the functional disabled state,
   but normalize the visual state to the Velocity button tokens. */
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-schedule-continue-btn:disabled,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-schedule-continue-btn[disabled],
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-continue-btn:disabled,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-continue-btn[disabled],
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-confirm-btn:disabled,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-confirm-btn[disabled],
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-confirmation-back-btn:disabled,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-confirmation-back-btn[disabled] {
    color: var(--ayvens-theme-neutral-neutral-500, #989A9A) !important;
    background: var(--ayvens-theme-neutral-neutral-200, #EEEEEE) !important;
    border-color: transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-schedule-back-btn:disabled,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-schedule-back-btn[disabled],
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-back-btn:disabled,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-back-btn[disabled],
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-back-btn:disabled,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-back-btn[disabled] {
    color: var(--ayvens-theme-neutral-neutral-500, #989A9A) !important;
    background: var(--ayvens-theme-neutral-neutral-200, #EEEEEE) !important;
    border-color: var(--ayvens-theme-neutral-neutral-200, #EEEEEE) !important;
    outline: 1px solid transparent !important;
    outline-offset: -2px !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

/* 20260617 pass50: final Velocity button state override.
   Applies the four visual states consistently across search, results, partner detail and booking CTAs.
   Hover is only enabled when a real hover-capable pointer exists; touch layouts keep rest/active/disabled. */
body.of-body #of-home-ctn .of-flow-button,
body.of-body #of-home-ctn .of-search-action,
body.of-body #of-home-ctn .of-partner-detail__action,
body.of-body #of-home-ctn .of-results-partner-card__select,
body.of-body #of-home-ctn .of-results-partner-card__directions,
body.of-body #of-home-ctn .of-search-location-current-button,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-schedule-back-btn,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-back-btn,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-back-btn,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-schedule-continue-btn,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-continue-btn,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-confirm-btn,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-confirmation-back-btn {
    box-sizing: border-box !important;
    opacity: 1 !important;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease !important;
}

/* Primary filled — rest */
body.of-body #of-home-ctn .of-flow-button--primary,
body.of-body #of-home-ctn .of-search-action--primary,
body.of-body #of-home-ctn .of-partner-detail__action--primary,
body.of-body #of-home-ctn .of-results-partner-card--selected .of-results-partner-card__select,
body.of-body #of-home-ctn .of-search-location-current-button,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-schedule-continue-btn:not(:disabled):not([disabled]):not([aria-disabled="true"]),
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-continue-btn:not(:disabled):not([disabled]):not([aria-disabled="true"]),
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-confirm-btn:not(:disabled):not([disabled]):not([aria-disabled="true"]),
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-confirmation-back-btn:not(:disabled):not([disabled]):not([aria-disabled="true"]) {
    color: #ffffff !important;
    background: var(--ayvens-theme-brand-secondary-400, #0F3549) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Primary filled — hover */
@media (any-hover: hover) {
    body.of-body #of-home-ctn .of-flow-button--primary:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
    body.of-body #of-home-ctn .of-search-action--primary:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
    body.of-body #of-home-ctn .of-partner-detail__action--primary:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
    body.of-body #of-home-ctn .of-results-partner-card--selected .of-results-partner-card__select:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
    body.of-body #of-home-ctn .of-search-location-current-button:not(:has(input:disabled)):hover,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-schedule-continue-btn:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-continue-btn:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-confirm-btn:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-confirmation-back-btn:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover {
        color: #ffffff !important;
        background: var(--ayvens-theme-brand-secondary-500, #072534) !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }
}

/* Primary filled — active */
body.of-body #of-home-ctn .of-flow-button--primary:not(:disabled):not([disabled]):not([aria-disabled="true"]):active,
body.of-body #of-home-ctn .of-search-action--primary:not(:disabled):not([disabled]):not([aria-disabled="true"]):active,
body.of-body #of-home-ctn .of-partner-detail__action--primary:not(:disabled):not([disabled]):not([aria-disabled="true"]):active,
body.of-body #of-home-ctn .of-results-partner-card--selected .of-results-partner-card__select:not(:disabled):not([disabled]):not([aria-disabled="true"]):active,
body.of-body #of-home-ctn .of-search-location-current-button:not(:has(input:disabled)):active,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-schedule-continue-btn:not(:disabled):not([disabled]):not([aria-disabled="true"]):active,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-continue-btn:not(:disabled):not([disabled]):not([aria-disabled="true"]):active,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-confirm-btn:not(:disabled):not([disabled]):not([aria-disabled="true"]):active,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-confirmation-back-btn:not(:disabled):not([disabled]):not([aria-disabled="true"]):active {
    color: #ffffff !important;
    background: var(--ayvens-theme-brand-secondary-300, #3F5D6D) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Primary filled — disabled */
body.of-body #of-home-ctn .of-flow-button--primary:disabled,
body.of-body #of-home-ctn .of-flow-button--primary[disabled],
body.of-body #of-home-ctn .of-flow-button--primary[aria-disabled="true"],
body.of-body #of-home-ctn .of-search-action--primary:disabled,
body.of-body #of-home-ctn .of-search-action--primary[disabled],
body.of-body #of-home-ctn .of-search-action--primary[aria-disabled="true"],
body.of-body #of-home-ctn .of-partner-detail__action--primary:disabled,
body.of-body #of-home-ctn .of-partner-detail__action--primary[disabled],
body.of-body #of-home-ctn .of-partner-detail__action--primary[aria-disabled="true"],
body.of-body #of-home-ctn .of-results-partner-card--selected .of-results-partner-card__select:disabled,
body.of-body #of-home-ctn .of-results-partner-card--selected .of-results-partner-card__select[disabled],
body.of-body #of-home-ctn .of-results-partner-card--selected .of-results-partner-card__select[aria-disabled="true"],
body.of-body #of-home-ctn .of-search-location-current-button:has(input:disabled),
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-schedule-continue-btn:disabled,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-schedule-continue-btn[disabled],
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-schedule-continue-btn[aria-disabled="true"],
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-continue-btn:disabled,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-continue-btn[disabled],
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-continue-btn[aria-disabled="true"],
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-confirm-btn:disabled,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-confirm-btn[disabled],
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-confirm-btn[aria-disabled="true"],
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-confirmation-back-btn:disabled,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-confirmation-back-btn[disabled],
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-confirmation-back-btn[aria-disabled="true"] {
    color: var(--ayvens-theme-neutral-neutral-500, #989A9A) !important;
    background: var(--ayvens-theme-neutral-neutral-200, #EEEEEE) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

/* Outlined — rest */
body.of-body #of-home-ctn .of-flow-button--secondary,
body.of-body #of-home-ctn .of-search-action--secondary,
body.of-body #of-home-ctn .of-partner-detail__action--secondary,
body.of-body #of-home-ctn .of-results-partner-card:not(.of-results-partner-card--selected) .of-results-partner-card__select,
body.of-body #of-home-ctn .of-results-partner-card__directions,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-schedule-back-btn:not(:disabled):not([disabled]):not([aria-disabled="true"]),
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-back-btn:not(:disabled):not([disabled]):not([aria-disabled="true"]),
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-back-btn:not(:disabled):not([disabled]):not([aria-disabled="true"]) {
    color: var(--ayvens-theme-brand-secondary-400, #0F3549) !important;
    background: var(--ayvens-theme-neutral-neutral-white, #FFFFFF) !important;
    border-color: var(--ayvens-theme-brand-secondary-400, #0F3549) !important;
    box-shadow: none !important;
}

/* Outlined — hover */
@media (any-hover: hover) {
    body.of-body #of-home-ctn .of-flow-button--secondary:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
    body.of-body #of-home-ctn .of-search-action--secondary:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
    body.of-body #of-home-ctn .of-partner-detail__action--secondary:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
    body.of-body #of-home-ctn .of-results-partner-card:not(.of-results-partner-card--selected) .of-results-partner-card__select:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
    body.of-body #of-home-ctn .of-results-partner-card__directions:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-schedule-back-btn:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-back-btn:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-back-btn:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover {
        color: var(--ayvens-theme-brand-secondary-300, #3F5D6D) !important;
        background: var(--ayvens-theme-brand-secondary-50, #DBE1E4) !important;
        border-color: var(--ayvens-theme-brand-secondary-300, #3F5D6D) !important;
        box-shadow: inset 0 0 0 1px var(--ayvens-theme-brand-secondary-300, #3F5D6D), 0 4px 8px 0 rgba(9, 30, 66, 0.08), 0 0 1px 0 rgba(9, 30, 66, 0.20) !important;
    }
}

/* Outlined — active */
body.of-body #of-home-ctn .of-flow-button--secondary:not(:disabled):not([disabled]):not([aria-disabled="true"]):active,
body.of-body #of-home-ctn .of-search-action--secondary:not(:disabled):not([disabled]):not([aria-disabled="true"]):active,
body.of-body #of-home-ctn .of-partner-detail__action--secondary:not(:disabled):not([disabled]):not([aria-disabled="true"]):active,
body.of-body #of-home-ctn .of-results-partner-card:not(.of-results-partner-card--selected) .of-results-partner-card__select:not(:disabled):not([disabled]):not([aria-disabled="true"]):active,
body.of-body #of-home-ctn .of-results-partner-card__directions:not(:disabled):not([disabled]):not([aria-disabled="true"]):active,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-schedule-back-btn:not(:disabled):not([disabled]):not([aria-disabled="true"]):active,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-back-btn:not(:disabled):not([disabled]):not([aria-disabled="true"]):active,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-back-btn:not(:disabled):not([disabled]):not([aria-disabled="true"]):active {
    color: var(--ayvens-theme-brand-secondary-500, #072534) !important;
    background: var(--ayvens-theme-brand-secondary-50, #DBE1E4) !important;
    border-color: var(--ayvens-theme-brand-secondary-500, #072534) !important;
    box-shadow: inset 0 0 0 1px var(--ayvens-theme-brand-secondary-500, #072534), 0 2px 2px 0 rgba(9, 30, 66, 0.08), 0 0 1px 0 rgba(9, 30, 66, 0.20) !important;
}

/* Outlined — disabled */
body.of-body #of-home-ctn .of-flow-button--secondary:disabled,
body.of-body #of-home-ctn .of-flow-button--secondary[disabled],
body.of-body #of-home-ctn .of-flow-button--secondary[aria-disabled="true"],
body.of-body #of-home-ctn .of-search-action--secondary:disabled,
body.of-body #of-home-ctn .of-search-action--secondary[disabled],
body.of-body #of-home-ctn .of-search-action--secondary[aria-disabled="true"],
body.of-body #of-home-ctn .of-partner-detail__action--secondary:disabled,
body.of-body #of-home-ctn .of-partner-detail__action--secondary[disabled],
body.of-body #of-home-ctn .of-partner-detail__action--secondary[aria-disabled="true"],
body.of-body #of-home-ctn .of-results-partner-card:not(.of-results-partner-card--selected) .of-results-partner-card__select:disabled,
body.of-body #of-home-ctn .of-results-partner-card:not(.of-results-partner-card--selected) .of-results-partner-card__select[disabled],
body.of-body #of-home-ctn .of-results-partner-card:not(.of-results-partner-card--selected) .of-results-partner-card__select[aria-disabled="true"],
body.of-body #of-home-ctn .of-results-partner-card__directions:disabled,
body.of-body #of-home-ctn .of-results-partner-card__directions[disabled],
body.of-body #of-home-ctn .of-results-partner-card__directions[aria-disabled="true"],
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-schedule-back-btn:disabled,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-schedule-back-btn[disabled],
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-schedule-back-btn[aria-disabled="true"],
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-back-btn:disabled,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-back-btn[disabled],
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-back-btn[aria-disabled="true"],
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-back-btn:disabled,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-back-btn[disabled],
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-back-btn[aria-disabled="true"] {
    color: var(--ayvens-theme-neutral-neutral-500, #989A9A) !important;
    background: var(--ayvens-theme-neutral-neutral-200, #EEEEEE) !important;
    border-color: var(--ayvens-theme-neutral-neutral-200, #EEEEEE) !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

/* 20260617 pass51: client review font-weight softening.
   Keep this as a final visual override in the Ayvens theme layer only.
   Target only the items called out in OF_review_1606_feito.docx. */
body.of-body #of-home-ctn .of-flow-vehicle-card__title,
body.of-body #of-home-ctn .of-flow-list-title,
body.of-body #of-home-ctn .of-flow-list-item__title,
body.of-body #of-home-ctn .of-search-service__title,
body.of-body #of-home-ctn .of-search-location__title,
body.of-body #of-home-ctn .of-search-location-current-label,
body.of-body #of-home-ctn .of-search-location-address-field .of-flow-field__label,
body.of-body #of-home-ctn .of-search-damage__title,
body.of-body #of-home-ctn .of-results-partner-card__name,
body.of-body #of-home-ctn .of-partner-detail__name,
body.of-body #of-home-ctn .of-partner-detail__service {
    font-weight: 500 !important;
}

body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-schedule__title,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-details__title,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-summary__title,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-details__section-title,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-summary__section-title,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-confirmation__title,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-confirmation__subtitle {
    font-weight: 500 !important;
}

body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-search-field__label,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-details__field-block > .of-search-field__label,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-details__readonly-block > .of-search-field__label,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-details__choice,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-summary__label,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-summary__contact-row dt,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-summary__value,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-summary__contact-list dd {
    font-weight: 500 !important;
}

/* 20260617 pass60: restore icon-only result card action icons after Velocity button background shorthand
   and remove the contextual card close from the full-screen partner detail stage.
   The card close stays available only for the desktop contextual map detail (stage=search). */
body.of-body #of-home-ctn .of-results-partner-card__select,
body.of-body #of-home-ctn .of-results-partner-card__directions {
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px 18px !important;
    overflow: hidden !important;
}

body.of-body #of-home-ctn .of-results-partner-card:not(.of-results-partner-card--selected) .of-results-partner-card__select {
    background-image: url("../../Images/Flow/Icons/appointment-blue.svg") !important;
}

body.of-body #of-home-ctn .of-results-partner-card--selected .of-results-partner-card__select {
    background-image: url("../../Images/Flow/Icons/appointment.svg") !important;
}

body.of-body #of-home-ctn .of-results-partner-card__directions {
    background-image: url("../../Images/Flow/Icons/location-blue.svg") !important;
}

body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__card > .of-partner-detail__close {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

body.of-body #of-home-ctn[data-current-stage="partner-detail"] > #of-partner-detail-panel.of-partner-detail .of-partner-detail__classification {
    right: 24px !important;
    max-width: calc(100% - 48px) !important;
}

/* 20260617 pass61: restore result card icon-only buttons without using button background-image
   and align booking close to the right side of the mobile/tablet/desktop header. */
body.of-body #of-home-ctn[data-results-state="ready"] .of-results-partner-card__select,
body.of-body #of-home-ctn[data-results-state="empty"] .of-results-partner-card__select,
body.of-body #of-home-ctn[data-results-state="ready"] .of-results-partner-card__directions,
body.of-body #of-home-ctn[data-results-state="empty"] .of-results-partner-card__directions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 !important;
    color: var(--ayvens-theme-brand-secondary-400, #0F3549) !important;
    font-size: 0 !important;
    line-height: 0 !important;
    border: 1px solid var(--ayvens-theme-brand-secondary-400, #0F3549) !important;
    border-radius: 999px !important;
    background-color: var(--ayvens-theme-neutral-neutral-white, #FFFFFF) !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 0 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

body.of-body #of-home-ctn[data-results-state="ready"] .of-results-partner-card__select::before,
body.of-body #of-home-ctn[data-results-state="empty"] .of-results-partner-card__select::before,
body.of-body #of-home-ctn[data-results-state="ready"] .of-results-partner-card__directions::before,
body.of-body #of-home-ctn[data-results-state="empty"] .of-results-partner-card__directions::before {
    content: "" !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    -webkit-mask: none !important;
    mask: none !important;
}

body.of-body #of-home-ctn[data-results-state="ready"] .of-results-partner-card__select::after,
body.of-body #of-home-ctn[data-results-state="empty"] .of-results-partner-card__select::after,
body.of-body #of-home-ctn[data-results-state="ready"] .of-results-partner-card__directions::after,
body.of-body #of-home-ctn[data-results-state="empty"] .of-results-partner-card__directions::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    background: none !important;
    -webkit-mask: none !important;
    mask: none !important;
}

body.of-body #of-home-ctn[data-results-state="ready"] .of-results-partner-card:not(.of-results-partner-card--selected) .of-results-partner-card__select::before,
body.of-body #of-home-ctn[data-results-state="empty"] .of-results-partner-card:not(.of-results-partner-card--selected) .of-results-partner-card__select::before {
    background-image: url("../../Images/Flow/Icons/appointment-blue.svg") !important;
}

body.of-body #of-home-ctn[data-results-state="ready"] .of-results-partner-card--selected .of-results-partner-card__select,
body.of-body #of-home-ctn[data-results-state="empty"] .of-results-partner-card--selected .of-results-partner-card__select {
    color: var(--ayvens-theme-neutral-neutral-white, #FFFFFF) !important;
    background-color: var(--ayvens-theme-brand-secondary-400, #0F3549) !important;
    border-color: var(--ayvens-theme-brand-secondary-400, #0F3549) !important;
}

body.of-body #of-home-ctn[data-results-state="ready"] .of-results-partner-card--selected .of-results-partner-card__select::before,
body.of-body #of-home-ctn[data-results-state="empty"] .of-results-partner-card--selected .of-results-partner-card__select::before {
    background-image: url("../../Images/Flow/Icons/appointment.svg") !important;
}

body.of-body #of-home-ctn[data-results-state="ready"] .of-results-partner-card__directions::before,
body.of-body #of-home-ctn[data-results-state="empty"] .of-results-partner-card__directions::before {
    background-image: url("../../Images/Flow/Icons/location-blue.svg") !important;
}

@media (min-width: 740px) {
    body.of-body #of-home-ctn[data-results-state="ready"] .of-results-partner-card__select,
    body.of-body #of-home-ctn[data-results-state="empty"] .of-results-partner-card__select,
    body.of-body #of-home-ctn[data-results-state="ready"] .of-results-partner-card__directions,
    body.of-body #of-home-ctn[data-results-state="empty"] .of-results-partner-card__directions {
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
    }
}

body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__back.of-booking__close {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
}

body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking__header-spacer {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
}

/* 20260617 pass62: restore result card icon-only actions to the stable background-image implementation.
   The generic Velocity button states are for text CTAs only; these result actions are icon-only controls
   with their own card layout positions. Do not draw the icons with pseudo-elements because older card
   positioning and Velocity overrides can make them overlap card text. */
body.of-body #of-home-ctn #of-results-panel .of-results-partner-card__select,
body.of-body #of-home-ctn #of-results-panel .of-results-partner-card__directions,
body.of-body #of-home-ctn #of-results-panel .of-results-partner-card__select:hover,
body.of-body #of-home-ctn #of-results-panel .of-results-partner-card__directions:hover,
body.of-body #of-home-ctn #of-results-panel .of-results-partner-card__select:active,
body.of-body #of-home-ctn #of-results-panel .of-results-partner-card__directions:active,
body.of-body #of-home-ctn #of-results-panel .of-results-partner-card__select:focus,
body.of-body #of-home-ctn #of-results-panel .of-results-partner-card__directions:focus {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
    border-radius: 999px !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 20px 20px !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transform: none !important;
}

body.of-body #of-home-ctn #of-results-panel .of-results-partner-card__select::before,
body.of-body #of-home-ctn #of-results-panel .of-results-partner-card__select::after,
body.of-body #of-home-ctn #of-results-panel .of-results-partner-card__directions::before,
body.of-body #of-home-ctn #of-results-panel .of-results-partner-card__directions::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    background-image: none !important;
    -webkit-mask: none !important;
    mask: none !important;
}

body.of-body #of-home-ctn #of-results-panel .of-results-partner-card__select,
body.of-body #of-home-ctn #of-results-panel .of-results-partner-card__select:hover,
body.of-body #of-home-ctn #of-results-panel .of-results-partner-card__select:active,
body.of-body #of-home-ctn #of-results-panel .of-results-partner-card__select:focus {
    background-color: var(--ayvens-theme-brand-secondary-400, #0F3549) !important;
    background-image: url("../../Images/Flow/Icons/appointment.svg") !important;
    border: 1px solid var(--ayvens-theme-brand-secondary-400, #0F3549) !important;
}

body.of-body #of-home-ctn #of-results-panel .of-results-partner-card__directions,
body.of-body #of-home-ctn #of-results-panel .of-results-partner-card__directions:hover,
body.of-body #of-home-ctn #of-results-panel .of-results-partner-card__directions:active,
body.of-body #of-home-ctn #of-results-panel .of-results-partner-card__directions:focus {
    background-color: var(--ayvens-theme-neutral-neutral-white, #FFFFFF) !important;
    background-image: url("../../Images/Flow/Icons/location-blue.svg") !important;
    border: 1px solid rgba(15, 53, 73, 0.28) !important;
}

@media (min-width: 1280px) {
    body.of-body #of-home-ctn #of-results-panel .of-results-desktop-list-view .of-results-partner-card__select,
    body.of-body #of-home-ctn #of-results-panel .of-results-desktop-list-view .of-results-partner-card__select:hover,
    body.of-body #of-home-ctn #of-results-panel .of-results-desktop-list-view .of-results-partner-card__select:active,
    body.of-body #of-home-ctn #of-results-panel .of-results-desktop-list-view .of-results-partner-card__select:focus {
        background-color: var(--ayvens-theme-neutral-neutral-white, #FFFFFF) !important;
        background-image: url("../../Images/Flow/Icons/appointment-blue.svg") !important;
        border: 1px solid rgba(15, 53, 73, 0.28) !important;
    }
}

@media (max-width: 1279px) {
    body.of-body #of-home-ctn #of-results-panel .of-results-partner-card__select,
    body.of-body #of-home-ctn #of-results-panel .of-results-partner-card__directions {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        background-size: 21px 21px !important;
    }
}

@media (max-width: 739px) {
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__select,
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__directions {
        position: absolute !important;
        top: auto !important;
        bottom: 10px !important;
        left: auto !important;
        right: 14px !important;
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
    }

    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__directions {
        right: 64px !important;
    }
}

/* 20260617 pass62: booking shell close belongs on the right side of the full-screen header.
   Use the component selector directly because the booking panel can be rendered before the home stage
   attribute is updated during responsive transitions. */
body.of-body #of-booking-panel.of-booking > .of-booking__header {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    align-items: center !important;
}

body.of-body #of-booking-panel.of-booking > .of-booking__header > .of-booking__back.of-booking__close {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
}

body.of-body #of-booking-panel.of-booking > .of-booking__header > .of-booking__title {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: center !important;
}

body.of-body #of-booking-panel.of-booking > .of-booking__header > .of-booking__header-spacer {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: center !important;
}

/* 20260617 pass63: restore touch result-card CTA behaviour.
   The pass60-62 icon-only fixes are needed for the desktop list, but touch/tablet cards must keep
   the validated textual "Escolher" CTA and must not show the extra directions icon. */
@media (max-width: 1279px) {
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__directions,
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__directions:hover,
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__directions:active,
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__directions:focus {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
        pointer-events: none !important;
    }

    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__select,
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__select:hover,
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__select:active,
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__select:focus,
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card--selected .of-results-partner-card__select,
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card--selected .of-results-partner-card__select:hover,
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card--selected .of-results-partner-card__select:active,
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card--selected .of-results-partner-card__select:focus {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        color: var(--ayvens-theme-brand-secondary-400, #0F3549) !important;
        font-family: var(--of-font-family-brand, Arial, sans-serif) !important;
        font-weight: 500 !important;
        text-indent: 0 !important;
        white-space: nowrap !important;
        background-color: var(--ayvens-theme-neutral-neutral-white, #FFFFFF) !important;
        background-image: none !important;
        background-repeat: no-repeat !important;
        background-size: auto !important;
        border: 1px solid var(--ayvens-theme-brand-secondary-400, #0F3549) !important;
        border-radius: 999px !important;
        box-shadow: none !important;
        overflow: visible !important;
        transform: none !important;
    }

    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__select::before,
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card--selected .of-results-partner-card__select::before {
        content: none !important;
        display: none !important;
    }

    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__select::after,
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card--selected .of-results-partner-card__select::after {
        content: "" !important;
        display: inline-block !important;
        flex: 0 0 auto !important;
        width: 12px !important;
        height: 12px !important;
        margin: 0 0 0 6px !important;
        padding: 0 !important;
        background-color: currentColor !important;
        background-image: none !important;
        -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 !important;
        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 !important;
    }
}

@media (max-width: 739px) {
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__select,
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__select:hover,
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__select:active,
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__select:focus,
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card--selected .of-results-partner-card__select,
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card--selected .of-results-partner-card__select:hover,
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card--selected .of-results-partner-card__select:active,
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card--selected .of-results-partner-card__select:focus {
        position: absolute !important;
        top: auto !important;
        right: 14px !important;
        bottom: 8px !important;
        left: 14px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        min-height: 34px !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 8px 12px !important;
        font-size: 12.5px !important;
        line-height: 15px !important;
    }
}

@media (min-width: 740px) and (max-width: 1279px) {
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__select,
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__select:hover,
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__select:active,
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__select:focus,
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card--selected .of-results-partner-card__select,
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card--selected .of-results-partner-card__select:hover,
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card--selected .of-results-partner-card__select:active,
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card--selected .of-results-partner-card__select:focus {
        position: static !important;
        grid-area: book !important;
        justify-self: end !important;
        align-self: end !important;
        width: auto !important;
        min-width: 82px !important;
        max-width: none !important;
        height: auto !important;
        min-height: 28px !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 5px 11px !important;
        font-size: 13px !important;
        line-height: 16px !important;
    }
}

/* 20260617 pass79: client form labels and Pré-inspeção e Devolução details layout. */
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-search-field__label--with-meta {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 4px !important;
}

body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-field-meta--optional {
    color: #757777 !important;
    font-family: "Source Sans 3", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
}

body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel[data-service-id="INSP"] .of-booking-details__section--vehicle-services {
    display: none !important;
}

body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel[data-service-id="INSP"] .of-booking-details__intro,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel[data-service-id="INSP"] .of-booking-details__form {
    width: min(100%, 420px) !important;
    max-width: 420px !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel[data-service-id="INSP"] .of-booking-details__lead {
    max-width: none !important;
}

body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel[data-service-id="INSP"] .of-booking-details__form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-content: center !important;
}

body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel[data-service-id="INSP"] .of-booking-details__section--contact {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
}

body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel[data-service-id="INSP"] .of-booking__actions--details {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

@media (max-width: 739px) {
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel[data-service-id="INSP"] .of-booking-details__intro,
    body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel[data-service-id="INSP"] .of-booking-details__form {
        width: 100% !important;
        max-width: none !important;
    }
}

/* 20260617 pass84: restore validated tablet/touch result card geometry.
   The desktop list-top change must not alter the horizontal card layout.  Keep
   badge, name, distance and "Escolher" on fixed rails inside each touch card. */
@media (min-width: 740px) and (max-width: 1279px) {
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card {
        display: block !important;
        position: relative !important;
        height: 150px !important;
        min-height: 150px !important;
        max-height: 150px !important;
        padding: 40px 14px 58px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__main,
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__header,
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__meta {
        display: block !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__classification {
        position: absolute !important;
        top: 10px !important;
        right: 12px !important;
        left: auto !important;
        justify-self: auto !important;
        align-self: auto !important;
        z-index: 4 !important;
    }

    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__name {
        display: -webkit-box !important;
        width: calc(100% - 6px) !important;
        max-width: calc(100% - 6px) !important;
        max-height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        text-overflow: clip !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }

    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__distance {
        position: absolute !important;
        top: auto !important;
        right: auto !important;
        bottom: 50px !important;
        left: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 28px) !important;
        height: 18px !important;
        min-height: 18px !important;
        max-height: 18px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--ayvens-theme-brand-secondary-400, #0F3549) !important;
        background: transparent !important;
        border: 0 !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        line-height: 18px !important;
        white-space: nowrap !important;
        z-index: 2 !important;
    }

    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__distance::before {
        flex: 0 0 18px !important;
        width: 18px !important;
        height: 18px !important;
        margin-right: 4px !important;
    }

    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__select,
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__select:hover,
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__select:active,
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card__select:focus,
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card--selected .of-results-partner-card__select,
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card--selected .of-results-partner-card__select:hover,
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card--selected .of-results-partner-card__select:active,
    body.of-body #of-home-ctn #of-results-panel .of-results-partners-list .of-results-partner-card--selected .of-results-partner-card__select:focus {
        position: absolute !important;
        top: auto !important;
        right: 14px !important;
        bottom: 20px !important;
        left: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 110px !important;
        max-width: none !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        margin: 0 !important;
        padding: 5px 11px !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 16px !important;
        z-index: 3 !important;
    }
}


/* Pass 42: booking confirm processing must keep active/loading colour even when disabled.
   This lives in ayvens.css because it is loaded after booking.panel.css. */
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-action--loading,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-action--loading:disabled,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-action--loading[disabled],
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-action--loading[aria-disabled="true"],
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-confirm-btn.of-booking-action--loading,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-confirm-btn.of-booking-action--loading:disabled,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-confirm-btn.of-booking-action--loading[disabled] {
    position: relative !important;
    color: transparent !important;
    background: var(--ayvens-theme-brand-secondary-300, #3F5D6D) !important;
    border-color: var(--ayvens-theme-brand-secondary-300, #3F5D6D) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    cursor: wait !important;
    pointer-events: none !important;
}

body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-action--loading > *,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-confirm-btn.of-booking-action--loading > * {
    opacity: 0 !important;
    color: transparent !important;
}

body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-action--loading::before,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-confirm-btn.of-booking-action--loading::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    background: url("/Images/Flow/Icons/loaderframeabsolute.svg") center / 24px 24px no-repeat !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: translate(-50%, -50%) !important;
    animation: of-ayvens-booking-action-loader-spin 760ms linear infinite !important;
}

@keyframes of-ayvens-booking-action-loader-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}


/* Pass 43: keep search/process buttons in the active loading colour on the first flow step and location search.
   Pass42 restored booking loading in ayvens.css, but it replaced the pass40 search-loading override.
   Re-apply the search processing state here so any primary CTA that is resolving/loading stays in Velocity active. */
body.of-body #of-home-ctn .of-search-action--primary.of-search-action--resolving,
body.of-body #of-home-ctn .of-search-action--primary.of-search-action--resolving:disabled,
body.of-body #of-home-ctn .of-search-action--primary.of-search-action--resolving[disabled],
body.of-body #of-home-ctn .of-search-action--primary.of-search-action--resolving[aria-disabled="true"],
body.of-body #of-home-ctn .of-flow-button--primary.of-search-button--loading,
body.of-body #of-home-ctn .of-flow-button--primary.of-search-button--loading:disabled,
body.of-body #of-home-ctn .of-flow-button--primary.of-search-button--loading[disabled],
body.of-body #of-home-ctn .of-flow-button--primary.of-search-button--loading[aria-disabled="true"],
body.of-body #of-home-ctn .of-search-location-current-button.of-search-button--loading,
body.of-body #of-home-ctn .of-search-location-current-button.of-search-button--loading:has(input:disabled),
body.of-body #of-home-ctn #of-search-location-confirm-btn.of-search-button--loading,
body.of-body #of-home-ctn #of-search-location-confirm-btn.of-search-button--loading:disabled,
body.of-body #of-home-ctn #of-search-location-confirm-btn.of-search-button--loading[disabled],
body.of-body #of-home-ctn #of-search-location-confirm-btn.of-search-button--loading[aria-disabled="true"] {
    position: relative !important;
    color: transparent !important;
    background: var(--ayvens-theme-brand-secondary-300, #3F5D6D) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    cursor: wait !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

body.of-body #of-home-ctn .of-search-action--primary.of-search-action--resolving > *,
body.of-body #of-home-ctn .of-flow-button--primary.of-search-button--loading > *,
body.of-body #of-home-ctn .of-search-location-current-button.of-search-button--loading > *,
body.of-body #of-home-ctn #of-search-location-confirm-btn.of-search-button--loading > * {
    opacity: 0 !important;
    color: transparent !important;
}

body.of-body #of-home-ctn .of-search-action--primary.of-search-action--resolving::before,
body.of-body #of-home-ctn .of-flow-button--primary.of-search-button--loading::before,
body.of-body #of-home-ctn .of-search-location-current-button.of-search-button--loading::before,
body.of-body #of-home-ctn #of-search-location-confirm-btn.of-search-button--loading::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    background: url("/Images/Flow/Icons/loaderframeabsolute.svg") center / 24px 24px no-repeat !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: translate(-50%, -50%) !important;
    animation: of-ayvens-search-action-loader-spin 760ms linear infinite !important;
}

@keyframes of-ayvens-search-action-loader-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}


/* Pass 44: keep loading spinners rotating.
   Previous loading rules fixed centering with transform: translate(... ) !important;
   transform animations cannot override an !important transform, so rotate the spinner
   through the independent CSS rotate property instead. */
body.of-body #of-home-ctn .of-search-action--primary.of-search-action--resolving::before,
body.of-body #of-home-ctn .of-flow-button--primary.of-search-button--loading::before,
body.of-body #of-home-ctn .of-search-location-current-button.of-search-button--loading::before,
body.of-body #of-home-ctn #of-search-location-confirm-btn.of-search-button--loading::before,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-action--loading::before,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-confirm-btn.of-booking-action--loading::before {
    animation: of-ayvens-loader-rotate 760ms linear infinite !important;
    rotate: 0deg;
    transform-origin: center center !important;
}

@keyframes of-ayvens-loader-rotate {
    from { rotate: 0deg; }
    to { rotate: 360deg; }
}


/* Pass 45: spin loader in place.
   Do not combine rotate with translate. The loader is centered with top/left calc,
   then only the icon itself rotates. */
body.of-body #of-home-ctn .of-search-action--primary.of-search-action--resolving::before,
body.of-body #of-home-ctn .of-flow-button--primary.of-search-button--loading::before,
body.of-body #of-home-ctn .of-search-location-current-button.of-search-button--loading::before,
body.of-body #of-home-ctn #of-search-location-confirm-btn.of-search-button--loading::before,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel .of-booking-action--loading::before,
body.of-body #of-home-ctn[data-current-stage="booking"] #of-booking-panel #of-booking-summary-confirm-btn.of-booking-action--loading::before {
    top: calc(50% - 12px) !important;
    left: calc(50% - 12px) !important;
    right: auto !important;
    width: 24px !important;
    height: 24px !important;
    transform: none !important;
    transform-origin: 50% 50% !important;
    rotate: 0deg;
    animation: of-ayvens-loader-spin-in-place 760ms linear infinite !important;
}

@keyframes of-ayvens-loader-spin-in-place {
    from { rotate: 0deg; }
    to { rotate: 360deg; }
}

/* 20260701 PRD-013: final location address search loader.
   Single override after the theme bundle. Keep the circular address-search action
   absolute inside the field in every viewport. Rest/focus/value states show the
   search icon; loading state swaps only that icon for the standard Ayvens loader. */
body.of-body #of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search {
    position: relative !important;
}

body.of-body #of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search > #of-search-location-confirm-btn.of-search-location-confirm-button,
body.of-body #of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search > #of-search-location-confirm-btn.of-search-location-confirm-button:disabled,
body.of-body #of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search > #of-search-location-confirm-btn.of-search-location-confirm-button[disabled],
body.of-body #of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search > #of-search-location-confirm-btn.of-search-location-confirm-button[aria-disabled="true"],
body.of-body #of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search > #of-search-location-confirm-btn.of-search-location-confirm-button[aria-busy="true"],
body.of-body #of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search > #of-search-location-confirm-btn.of-search-location-confirm-button.of-search-button--loading {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    bottom: 4px !important;
    left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    color: transparent !important;
    background: var(--ayvens-theme-neutral-neutral-200, #e5e5e5) !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    opacity: 1 !important;
    overflow: hidden !important;
    transform: none !important;
    cursor: pointer !important;
    z-index: 3 !important;
}

body.of-body #of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search.of-search-location-address-search--has-value > #of-search-location-confirm-btn.of-search-location-confirm-button {
    background: var(--of-flow-brand-color, #0f3549) !important;
}

body.of-body #of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search > #of-search-location-confirm-btn.of-search-location-confirm-button.of-search-button--loading,
body.of-body #of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search > #of-search-location-confirm-btn.of-search-location-confirm-button[aria-busy="true"] {
    background: var(--ayvens-theme-brand-secondary-300, #3F5D6D) !important;
    cursor: wait !important;
    pointer-events: none !important;
}

body.of-body #of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search > #of-search-location-confirm-btn.of-search-location-confirm-button > * {
    opacity: 0 !important;
    color: transparent !important;
}

body.of-body #of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search > #of-search-location-confirm-btn.of-search-location-confirm-button::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    background: none !important;
    animation: none !important;
}

body.of-body #of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search > #of-search-location-confirm-btn.of-search-location-confirm-button:not(.of-search-button--loading):not([aria-busy="true"])::before {
    content: "" !important;
    position: absolute !important;
    top: calc(50% - 10px) !important;
    left: calc(50% - 10px) !important;
    right: auto !important;
    bottom: auto !important;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: url("/Images/Flow/Icons/search-rest.svg") center / 20px 20px no-repeat !important;
    border: 0 !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    rotate: none !important;
    animation: none !important;
    z-index: 1 !important;
}

body.of-body #of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search.of-search-location-address-search--has-value > #of-search-location-confirm-btn.of-search-location-confirm-button:not(.of-search-button--loading):not([aria-busy="true"])::before {
    background-image: url("/Images/Flow/Icons/search.svg") !important;
}

body.of-body #of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search > #of-search-location-confirm-btn.of-search-location-confirm-button.of-search-button--loading::before,
body.of-body #of-home-ctn[data-current-step="location"] #of-search-location-step .of-search-location-address-search > #of-search-location-confirm-btn.of-search-location-confirm-button[aria-busy="true"]::before {
    top: calc(50% - 12px) !important;
    left: calc(50% - 12px) !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    background: url("/Images/Flow/Icons/loaderframeabsolute.svg") center / 24px 24px no-repeat !important;
    transform: none !important;
    transform-origin: 50% 50% !important;
    rotate: 0deg;
    animation: of-ayvens-location-address-loader-prd014 760ms linear infinite !important;
}

@keyframes of-ayvens-location-address-loader-prd014 {
    from { rotate: 0deg; }
    to { rotate: 360deg; }
}

/* 20260701 PRD-020: process primary action loader in every search step.
   The search flow moves the active CTA to the fixed process footer on WEB.
   Some step-level CSS hides pseudo-elements on the original buttons, so the
   moved footer CTA needs a final, higher-specificity loading rule. Applies to
   mandatory plate, fuel type, brand, Pré-inspeção/Devolução and damage steps. */
body.of-body--web #of-home-ctn[data-current-stage="search"][data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__primary-action > .of-search-shell__process-primary-button.of-search-button--loading,
body.of-body--web #of-home-ctn[data-current-stage="search"][data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__primary-action > .of-search-shell__process-primary-button.of-search-button--loading:disabled,
body.of-body--web #of-home-ctn[data-current-stage="search"][data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__primary-action > .of-search-shell__process-primary-button.of-search-button--loading[disabled],
body.of-body--web #of-home-ctn[data-current-stage="search"][data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__primary-action > .of-search-shell__process-primary-button.of-search-button--loading[aria-disabled="true"],
body.of-body--web #of-home-ctn[data-current-stage="search"][data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__primary-action > .of-search-shell__process-primary-button[aria-busy="true"] {
    position: relative !important;
    color: transparent !important;
    background: var(--ayvens-theme-brand-secondary-300, #3F5D6D) !important;
    border-color: var(--ayvens-theme-brand-secondary-300, #3F5D6D) !important;
    box-shadow: none !important;
    cursor: wait !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

body.of-body--web #of-home-ctn[data-current-stage="search"][data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__primary-action > .of-search-shell__process-primary-button.of-search-button--loading > *,
body.of-body--web #of-home-ctn[data-current-stage="search"][data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__primary-action > .of-search-shell__process-primary-button[aria-busy="true"] > * {
    opacity: 0 !important;
    color: transparent !important;
}

body.of-body--web #of-home-ctn[data-current-stage="search"][data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__primary-action > .of-search-shell__process-primary-button.of-search-button--loading::before,
body.of-body--web #of-home-ctn[data-current-stage="search"][data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__primary-action > .of-search-shell__process-primary-button[aria-busy="true"]::before {
    content: "" !important;
    position: absolute !important;
    top: calc(50% - 12px) !important;
    left: calc(50% - 12px) !important;
    right: auto !important;
    bottom: auto !important;
    display: block !important;
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: url("/Images/Flow/Icons/loaderframeabsolute.svg") center / 24px 24px no-repeat !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
    transform-origin: 50% 50% !important;
    rotate: 0deg;
    animation: of-ayvens-process-primary-loader-prd020 760ms linear infinite !important;
    z-index: 1 !important;
}

body.of-body--web #of-home-ctn[data-current-stage="search"][data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__primary-action > .of-search-shell__process-primary-button.of-search-button--loading::after,
body.of-body--web #of-home-ctn[data-current-stage="search"][data-search-primary-action-active="true"] > #of-search-panel.of-home__search .of-search-shell__primary-action > .of-search-shell__process-primary-button[aria-busy="true"]::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
    animation: none !important;
}

@keyframes of-ayvens-process-primary-loader-prd020 {
    from { rotate: 0deg; }
    to { rotate: 360deg; }
}


/* 20260701 PRD-021: Pré-inspeção/Devolução is an internal service choice step and must expose the same close action as the other process steps. */
body.of-body--web #of-home-ctn[data-current-step="return-service"] .of-search-shell__close {
    position: static !important;
    inset: auto !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    display: inline-flex !important;
    transform: none !important;
    z-index: auto !important;
}

body.of-body--web #of-home-ctn[data-current-step="return-service"] .of-search-shell__close > .of-shell-close-icon {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    transform: none !important;
}