body {
	font-family:"Helvetica","Arial","Tahoma","sans-serif";	
	color:#000000;
	
}

.offer_link {
	color:#000000;
	font-size:32px;
	text-decoration:none;
	text-align: center;
}

.totalprice {
	color:red;
	font-weight:bold;
	border:0;
	text-align: right;
}

.totalitem {
	color:000000;
	font-weight:normal;
	border:0;
	text-align: right;
}

* {
	font-size:13px;
}

.mainlink_b {
	color:#000000;
	font-size:14px;
	text-decoration:none;
	font-weight:bold;	
}

.mainlink {
	color:#ffffff;
	font-size:14px;
	text-decoration:none;
	font-weight:bold;	
}

.tbl_order {
	color:#ffffff;
	font-size:12px;
	text-decoration:none;
	font-weight:bold;
}

.tbl_order_1 {
	color:#ffffff;
	font-size:15px;
	text-decoration:none;
	font-weight:bold;
}

.tbl_order_1_n {
	color:#ffffff;
	font-size:15px;
	text-decoration:none;
	font-weight:normal;
}

.BigTitle {
	color:#17284F;
	font-size:15px;
	text-decoration:none;
	font-weight:bold;
}

.w_title
{
	color:#6A1725;
	font-size:15px;
	text-decoration:none;
	font-weight:bold;
}

li {
	padding-bottom:6px;
	font-size:15px;
} 

.ul_black {
	padding-left:30px;	
	color:#000000;
}

ul { 
	padding-left:30px;	
	color:#000000;
}

.tbl_order_1_n ul { 
	padding-left:30px;	
	color:#ffffff;
	list-style-image:url("application/images/white-tick.png");
}

.mobile_s_text {
	color:#3366CC;
	font-size:20px;
}

.mobile_text {
	color:#3366CC;
	font-size:49px;
}

.black li {
	color:#000000;
	font-size:13px;
}

.tb7 {
	width: 180px;
	background: transparent url('application/images/textbox_fld.jpg') no-repeat;
	color : #747862;
	height:20px;
	border:0;
	padding:4px 8px;
	margin-bottom:0px;
}
#page h1.title {
	font-weight:normal;
	margin-bottom:20px;
	font-size:28px;
}
.tbl_show_car {
	padding:6px;
	background-color:#FFFFFF;
}

#page input.basketSubmit {
	-moz-border-radius:5px 5px 5px 5px;
	background-color:#A3A5A7;
	border:1px solid #A3A5A7;
	color:#FFFFFF;
	cursor:pointer;
	padding:2px;
	font-size:13px;
}
#page .text {
	text-align:justify;
}
#page .date {
	color:#777B7F;
}
#page .pic {
	float:left;
	padding:5px 10px 0px 0px;
}
#page #zoom a {
	background:url(../application/images/lens.jpg) bottom right no-repeat;
	padding-bottom:4px;
	padding-right:17px;
	color:#959A9F;
	text-decoration:none;
}
#page #zoom a:hover {
	color:#000000;
}
#page .back {
	margin-top:15px;
	text-align:right;
}
#page .contact_form a {
	color:#9F090F;
}
#page .contact_form a:hover {
	color:#000000;
}
#page .back a {
	color:#9F090F;
}
#page .back a:hover {
	color:#000000;
}
#page .contact_form {
	float:left;
	width:410px;
	padding-right:20px;
	border-right:1px solid #D1D2D4;
}
#page .contact_form form .line,.review_form form .line,.payment_form .line {
	margin-bottom:5px;
}
#page .contact_form form label,.review_form form label,.payment_form label {
	float:left;
	display:block;
	width:120px;
}
#page .contact_form form input,.review_form form input,.payment_form input {
	padding:2px;
	width:216px;
	border:1px solid #BFBFBF;	
}
#page .contact_form form .textarea,.review_form form .textarea {
	border:1px solid #BFBFBF;
	width:275px;
	padding:2px;
}
#page .contact_form form .submitButton,.review_form form .submitButton,.payment_form .submitButton {
	width:100px;
	background-color:#FFFFFF;
	font-size:12px;
	position:relative;
	left:120px;
}
#page .contact_form form .submitButton:hover,.review_form form .submitButton:hover,.payment_form .submitButton:hover {
	border:1px solid #A3A5A7;
}
#page .contact_text {
	float:right;
	width:330px;
}
#page #show_gmap {
	margin-top:10px;
}

#page #gmap {
	margin-top:15px;
	width:400px;
	height:230px;
	display:none;
}
#page .contact_text .txt {
	clear:left;
	padding-left:10px;
	display:block;
}
#page .col1 {
	float:left;
	width:200px;
	padding-right:20px;
}
.sub_button			{
	border:1px solid #000000;
	background:#3163CE; 
	color:#ffffff;
	cursor:pointer;
}	
a {
	color:#000000;
}

/* GR CAR Phase 3 visual layer. Existing PHP contracts and form controls remain unchanged. */
:root {
	--gr-blue:#1e56c7;
	--gr-navy:#10234f;
	--gr-ink:#13213d;
	--gr-muted:#60708d;
	--gr-line:#dfe5ef;
	--gr-surface:#ffffff;
	--gr-soft:#f6f8fc;
}

/* Round 12, task 1/6 root cause: this document has no <!DOCTYPE>, so it
   renders in the browser's "quirks mode" (document.compatMode ===
   "BackCompat"). In quirks mode, a percentage/keyword height on a block box
   can resolve against the viewport even when its own containing chain has no
   explicit height. The legacy markup's <table class="grcar-shell" ...
   height=100%> attribute (main.html) is exactly that: it was being honored
   as "100% of the current viewport height", NOT "height of my own content".
   Measured live: at a 1536x1024 viewport, .grcar-shell's own box was exactly
   1024px tall while its real content (benefits/travel section/footer) needed
   1723px -- on a short page (e.g. the contact page, far less than one
   viewport of content) the effect reverses: the shell was forced to the FULL
   1024px viewport height even though the actual content only needed ~907px,
   leaving ~117px of pure dead white space between the footer and the shell's
   own bottom edge (confirmed live) -- this is task 6's "very large empty
   white area below the footer". html's own explicit white background (the
   old `html{background:#fff}` rule) and body's own box only ever extending
   to this same mis-measured height are what produced task 1's reported grey/
   white seam risk once content naturally varies per page/breakpoint. Fixing
   .grcar-shell's height to the standard, literal "auto" (overriding the
   inline attribute, which has no real CSS specificity and is trivially
   overridden) makes the shell always exactly as tall as its real content on
   every page. html no longer needs (or gets) its own explicit background:
   removing it lets body's background legitimately propagate to the canvas
   per the CSS2 canvas-background rule, so the one exterior tone in Task 1
   below covers the full scrollable height with no seam, on every page. */
body.grcar-page {
	margin:0;
	color:var(--gr-ink);
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
}
.grcar-page * { box-sizing:border-box; }
.grcar-page img { max-width:100%; height:auto; }
/* Root cause of tablet/narrow overflow: several legacy tables carry a fixed
   HTML width attribute (e.g. width=892) that keeps forcing that pixel width
   below 892px viewports. Capping every table to its container, rather than
   hiding the symptom with overflow-x:hidden, fixes the actual box size. */
.grcar-page table { max-width:100%; }
/* Round 12, task 1: single exterior tone (outside the centered container) for
   the FULL document height, every page. Proposed value from the task brief;
   the previous #eef1f5 was already within the same pale cool-grey family
   (rgb 238/241/245 vs rgb 243/246/250 -- a ~2% lightness difference), so this
   is a direct adoption of the brief's value rather than a competing
   alternative. */
html, body.grcar-page { min-height:100%; }
body.grcar-page {
	background:#F3F6FA;
	/* Round 12, task 6: body becomes the single flex column that the shell
	   (its one real child) grows inside, so short pages (contact, legal) are
	   always at least one viewport tall and the footer -- via the flex
	   spacer immediately before it, not fixed/absolute positioning -- lands
	   at the bottom instead of leaving a dead gap. Long pages (homepage)
	   simply grow past 100vh in normal flow, same as before. */
	display:flex;
	flex-direction:column;
	min-height:100vh;
}
.grcar-shell {
	width:100%;
	/* !important required here: the earlier ".grcar-page table { max-width:100%; }"
	   mobile-overflow safety net (specificity 0,1,1) outranks this single-class
	   selector (0,1,0) under normal cascade rules, so without !important this
	   max-width was silently discarded and the shell rendered at full viewport
	   width with no centering — the root cause of the flush-left layout. */
	max-width:1280px !important;
	min-width:0;
	/* Overrides the legacy height=100% HTML attribute -- see the task 1/6
	   root-cause comment above the body rule. */
	height:auto !important;
	margin:0 auto;
	background:#fff;
	box-shadow:0 0 36px rgba(16,35,79,.08);
	/* flex:1, not a second flex *container* -- .grcar-shell is merely body's
	   one flex item here (display stays block-ish via the chain below), so it
	   grows to fill any leftover viewport height on short pages without
	   touching how its own children lay out. */
	flex:1 0 auto;
	display:flex;
	flex-direction:column;
}
.grcar-shell > tbody { display:flex; flex-direction:column; flex:1; width:100%; }
.grcar-shell > tbody > tr { display:flex; flex-direction:column; flex:1; width:100%; }
.grcar-shell > tbody > tr > td { display:flex; flex-direction:column; flex:1; width:100%; }
/* Found live while screenshotting a short page at a tall viewport: the
   legacy markup's malformed opening (<table class="grcar-shell" ...><td>
   <td align=center ...>real content...) auto-generates TWO <td>s in that
   row -- an always-empty stray one, then the real content one. Both matched
   the rule above equally, so with flex:1 (flex-basis 0) on each, any
   leftover height from task 6's sticky-footer growth (body/shell filling at
   least 100vh) was split EQUALLY between the empty td and the real one,
   pushing the whole header/hero/content block down by however much empty
   space the stray td absorbed -- a large blank gap above the header on any
   page shorter than the viewport. The stray td has no content and nothing
   else targets it; excluding it from the flex layout (display:none) removes
   the empty competing flex item so all growth goes to the real content td. */
.grcar-shell > tbody > tr > td:first-child { display:none; }
/* Absorbs leftover vertical space on short pages so the footer (which keeps
   its own normal margin-top below, unchanged) lands at the very bottom of
   the now-full-height shell; has zero height whenever content already fills
   or exceeds the viewport (every long page), so nothing changes there. */
.grcar-flex-spacer { flex:1 0 auto; }
/* table-layout:fixed is required, not just width:100%: these are auto-layout
   tables, and the browser was sizing them to the max-content width of their
   widest descendant (e.g. the 892px-wide legacy inner tables/cells) instead
   of honoring the 100% width, leaving a ~108px gap on the right inside the
   1280px shell at wide viewports (hero/content stopped at ~1172px). Fixed
   layout makes the percentage width literal. */
.grcar-shell > tbody > tr > td > table { width:100% !important; table-layout:fixed; }
.grcar-shell table { border-collapse:collapse; }
.grcar-header {
	width:100% !important;
	height:auto !important;
	background:#fff;
	border-bottom:0;
}
.grcar-header > tbody > tr:first-child { display:none; }
.grcar-header > tbody > tr:nth-child(2) > td { padding:0 !important; }
.grcar-header > tbody > tr:nth-child(2) > td > .grcar-nav,
.grcar-nav {
	width:min(1180px, calc(100% - 48px)) !important;
	min-height:78px;
	margin:0 auto;
	padding:0 !important;
	background:#fff;
}
/* Round 12, task 4 root-cause fix: display:flex was applied to the <table>
   itself, but a table's only real direct child is its (auto-inserted)
   <tbody> -- the two <tr>s (logo row, nav-items row) never became flex items
   at all and kept their UA-default display:table-row, which simply stacks
   them vertically. That is why the logo rendered on its own row above the
   nav links/flags instead of sharing one line with them. Confirmed live via
   getComputedStyle before this fix: .grcar-nav's own display was "flex", but
   both <tr> children still reported display:"table-row". Flex now applies at
   the level that actually has two children needing to sit side by side
   (tbody), and each <tr> is itself a flex row so its own <td> children (logo
   link; or menu items + language flags) lay out horizontally too, instead of
   via anonymous table-cell layout. */
.grcar-nav > tbody {
	display:flex;
	flex-direction:row;
	align-items:center;
	width:100%;
	min-height:78px;
}
.grcar-nav > tbody > tr { display:flex; align-items:center; }
.grcar-nav > tbody > tr:not(.grcar-logo-row) {
	flex:0 1 auto;
	min-width:0;
	justify-content:flex-end;
	gap:clamp(10px, 1.5vw, 26px);
}
/* The legacy phone/contact table sits between the header and the vitrine in
   the original template. The approved desktop master places that contact
   affordance in the header; leaving this legacy block in normal flow adds
   roughly 200px before the hero and changes every measured y-coordinate.
   Keep the original markup and booking contract, but remove only this
   duplicate presentation block from the local visual layer. */
.grcar-header + br + table { display:none; }
/* Round 11, task 3: the logo was a non-interactive CSS ::before background
   image with no way to attach a real <a>. Replaced with a real first <tr>
   (.grcar-logo-row) in main.html containing one <td><a class="grcar-logo-
   link">; margin-right:auto on that row reproduces the old pseudo-element's
   "push everything else to the right" behavior -- .grcar-logo-row and the
   nav-items <tr> are the two flex items of .grcar-nav > tbody (see the
   round-12 fix above), so this auto margin pushes the items row to the far
   right exactly as the old background-image logo did. Same logo asset, same
   146x54 box. */
.grcar-logo-row { margin-right:auto; }
.grcar-logo-cell { padding:0 !important; }
.grcar-logo-link {
	display:block;
	width:146px;
	height:54px;
	background:url('application/images/Logo(380x155).jpg') left center/contain no-repeat;
	border-radius:4px;
}
.grcar-logo-link:focus-visible {
	outline:2px solid var(--gr-blue);
	outline-offset:3px;
}
.grcar-nav td { padding:0 !important; white-space:nowrap; }
/* Round 10, task 1: the line.gif separator <td>s (which also carried the only
   horizontal spacing between nav items via their 7px side padding) were
   removed from main.html, and nav-item spacing was compensated with a
   per-item padding-right because the outer .grcar-nav's flex `gap` could not
   reach the <td>s at the time (its only real flex child was the single
   <tr> — see the round-12 header fix above, which moves `gap` onto that
   <tr> itself). Now that the <tr> is a genuine flex row with its own `gap`,
   this padding is redundant and would double the spacing, so it is removed
   rather than kept as a second, stacking source of the same gap. */
/* The legacy nav separator (line.gif, 5x35px) was being force-scaled to 22px
   wide, which stretched its height to ~154px and rendered as a tall blue bar.
   Flex `gap` already provides spacing, so the separator image is hidden. */
.grcar-nav td img[src*="line.gif"] { display:none; }
/* Language switcher: the legacy markup is three bare <a><img></a> flags with
   no padding, so click targets were ~20px square. Each flag link now gets a
   generous padded hit area inside a neatly grouped, subtly bordered pill,
   without touching the href/lang-switching logic itself. */
.grcar-nav td img:not([src*="line.gif"]) { width:18px !important; height:auto; border-radius:2px; vertical-align:middle; }
.grcar-nav td:has(img) {
	display:flex;
	align-items:center;
	gap:2px;
	background:#f5f7fa;
	border-radius:10px;
	padding:4px !important;
}
.grcar-nav td:has(img) a {
	display:flex;
	align-items:center;
	justify-content:center;
	width:34px;
	height:34px;
	border-radius:7px;
	transition:background .15s ease;
}
.grcar-nav td:has(img) a:hover,
.grcar-nav td:has(img) a:focus-visible { background:#fff; box-shadow:0 1px 4px rgba(16,35,79,.12); }
.grcar-nav .mainlink,
.grcar-nav .mainlink_b {
	position:relative;
	color:var(--gr-ink);
	display:block;
	font-size:clamp(13px, 1.05vw, 15px);
	font-weight:700;
	padding:12px 0;
	text-decoration:none;
	border-bottom:2px solid transparent;
	transition:color .15s ease, border-color .15s ease;
}
.grcar-nav .mainlink:hover { color:var(--gr-blue); }
/* Active-page indicator: the legacy template already flags the current page
   via the .mainlink_b class (see main.html's $cl="mainlink_b" branches), so
   this only styles that existing state — no new logic. */
.grcar-nav .mainlink_b { color:var(--gr-blue); border-bottom-color:var(--gr-blue); }
.grcar-header { position:relative; }
.grcar-menu-toggle { display:none; }
.grcar-nav td:has(img) { margin-left:16px; border-left:1px solid var(--gr-line); padding-left:16px !important; }
.grcar-content {
	width:100% !important;
	background:#fff !important;
}
.grcar-content > tbody > tr > td { width:100% !important; padding:0 !important; }
.grcar-vitrine {
	/* Hero image controls: tune only these values for future composition work.
	   The image layer is independent from the copy and booking card below. */
	--grcar-hero-height:560px;
	--grcar-hero-image-scale:cover;
	/* The source photo (2169x725, ratio ~2.99:1) is wider than the 1280x560
	   container (ratio ~2.29:1), so background-size:cover crops horizontally
	   only (the full image height always fits). The White Tower and the Greek
	   flag sit near the LEFT edge of the source photo (~x=100-320 of 2169).
	   A centered crop pushed that region out of frame entirely. Anchoring to
	   the left edge keeps the tower, flag and promenade in view while still
	   showing most of the sunset sky/sun disc (visible window covers roughly
	   the first ~76% of the image width at this container size). */
	--grcar-hero-image-x:0%;
	--grcar-hero-image-y:center;
	position:relative;
	/* flow-root (not plain block): establishes a new block-formatting context
	   so the booking card's own top margin (set further below) cannot
	   margin-collapse through the now-block-ified tbody/tr/td chain and push
	   this whole hero box down the page (that collapse is what caused the
	   large blank gap above the hero when tbody/tr were first changed to
	   display:block to fix the booking-card centering bug). */
	display:flow-root;
	width:100% !important;
	height:auto;
	min-height:var(--grcar-hero-height);
	padding:0 !important;
	background:#fff;
}
.grcar-vitrine:before {
	content:"";
	position:absolute;
	inset:0 0 auto;
	height:var(--grcar-hero-height);
	z-index:0;
	/* Explicit image sizing preserves the source ratio and leaves a restrained
	   tonal fill behind the intentionally smaller, fully framed photograph. */
	background-image:linear-gradient(90deg, rgba(16,35,79,.08), rgba(30,86,199,.01)), url('application/images/grcar-hero-thessaloniki-panorama-v1.png');
	background-position:0 0, var(--grcar-hero-image-x) var(--grcar-hero-image-y);
	background-size:100% 100%, var(--grcar-hero-image-scale);
	background-repeat:no-repeat;
}
/* Descendant selector, not ">": the browser auto-inserts <tbody>/<tr> around
   these <td>s, so a direct-child combinator never matched and the cells kept
   their default table-cell box. That only stayed hidden because the hero
   copy and booking card inside were pulled out via position:absolute; the
   mobile stacked layout below depends on these actually being block boxes. */
/* .grcar-vitrine is a <table> forced to display:block, but its <tr> child
   kept the default table-row display. With no real table context left, the
   browser builds an anonymous table-layout box for that row and shrink-wraps
   it to its content's auto width (~969px here) instead of stretching to the
   vitrine's full 1280px, left-anchored at the vitrine's own left edge. Every
   "center" rule on the booking card below was therefore centering inside
   that narrower, left-anchored phantom row, not inside the real 1280px hero
   — which is the actual root cause of the card sitting left of true center.
   Forcing the row to display:block too removes the anonymous table box. */
.grcar-vitrine tbody { display:block; width:100%; }
.grcar-vitrine tr { display:block; width:100%; }
.grcar-vitrine td { position:static; z-index:1; display:block; width:100% !important; }
.grcar-vitrine td:last-child { position:static; }
.grcar-vitrine td.grcar-hero-copy { position:absolute; width:32.6% !important; }
.grcar-hero-copy { position:absolute; left:35.2%; top:94px; z-index:1; width:32.6% !important; min-width:280px; margin:0; color:var(--gr-ink); text-align:left; }
.grcar-hero-copy .grcar-eyebrow { display:block; color:var(--gr-blue); font-size:13px; font-weight:700; letter-spacing:.1em; line-height:1.25; }
.grcar-hero-copy h1 { margin:0 0 12px; font-size:42px; line-height:1.06; letter-spacing:-.03em; }
.grcar-hero-copy p { margin:0; font-size:18px; line-height:1.45; }
.grcar-booking-copy { padding:22px 34px 16px; color:var(--gr-ink); text-align:center; }
.grcar-booking-copy .grcar-eyebrow { color:var(--gr-blue); font-size:12px; font-weight:700; letter-spacing:.08em; line-height:1.3; }
.grcar-booking-copy h1 { margin:9px 0 9px; color:var(--gr-ink); font-size:27px; line-height:1.12; letter-spacing:-.02em; }
.grcar-booking-copy p { margin:0; color:#56657a; font-size:14px; line-height:1.4; }
.grcar-booking-copy-divider { height:1px; margin:17px 0 0; background:var(--gr-line); }
.grcar-vitrine .grcar-booking-card {
	width:min(840px, calc(100% - 48px)) !important;
	min-width:340px;
	max-width:calc(100% - 48px);
	height:auto;
	position:relative;
	left:auto;
	top:auto;
	transform:none;
	margin:286px auto 0;
	border:0 !important;
	border-radius:20px;
	background:rgba(255,255,255,.97);
	box-shadow:0 22px 54px rgba(16,35,79,.20);
	overflow:hidden;
}
.grcar-booking-card > tbody > tr:first-child td {
	background:#fff !important;
	height:auto !important;
	padding:22px 38px 9px !important;
	border:0;
	text-align:center !important;
}
.grcar-booking-card > tbody > tr:first-child input { display:none; }
.grcar-booking-card .tbl_order {
	color:var(--gr-ink);
	font-size:17px;
	font-weight:700;
	display:inline-block;
	text-align:center;
}
.grcar-booking-card > tbody > tr:nth-child(2) > td { padding:0 38px 24px !important; }
.grcar-booking-card form { width:100%; display:flex; flex-wrap:wrap; justify-content:space-between; }
/* The legacy <br> between the "Anfang"/"Ende" tables used to force a line
   break inside the flex row (inline-block respects text flow), stacking the
   two columns with a large gap. It carries no layout meaning, so it is hidden. */
.grcar-booking-card form > br { display:none; }
.grcar-booking-card form table { width:100%; margin:0 0 10px; background:#fff !important; }
.grcar-booking-card form > table:first-of-type,
.grcar-booking-card form > table:nth-of-type(2) { flex:0 0 48.5%; max-width:48.5%; margin:0; }
.grcar-booking-card form table td { padding:5px 0 !important; color:var(--gr-ink); }
.grcar-booking-card form table td[rowspan] { display:none; }
/* Hiding the rowspan label cell above leaves its row's only remaining cell
   (an empty <td></td>) rendering as a blank spacer row above every field
   table; removing that now-empty first row keeps the card height tight. */
.grcar-booking-card form > table:first-of-type tr:first-child,
.grcar-booking-card form > table:nth-of-type(2) tr:first-child { display:none; }
.grcar-booking-card form table tr:nth-child(2) td,
.grcar-booking-card form table tr:nth-child(3) td { font-size:14px; font-weight:700; letter-spacing:.01em; }
.grcar-booking-card select,
.grcar-booking-card input[type=textbox],
.grcar-booking-card input[type=text] {
	width:100% !important;
	min-height:36px;
	margin:10px 0 0;
	padding:0 12px;
	border:1px solid var(--gr-line);
	border-radius:9px;
	background:#fff;
	color:var(--gr-ink);
	font-size:14px;
	box-sizing:border-box;
}
/* The CityID_start/CityID_end selects are already the same 36px box as the
   date fields above (box-sizing:border-box, identical border), but a native
   <select>'s own internal text padding/line-height isn't fully controllable
   via CSS and renders visually tighter than a plain text input -- even at
   matching box height, the text inside looks less vertically centered. This
   replaces the native look (incl. its browser-drawn arrow, which otherwise
   sits at a different vertical rhythm per browser) with a plain custom one,
   so it renders pixel-identically to the date field next to it. */
.grcar-booking-card select[name=CityID_start],
.grcar-booking-card select[name=CityID_end] {
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	line-height:34px;
	padding-right:34px;
	background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' fill='none' stroke='%23667085' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 12px center;
	background-size:14px;
}
.grcar-booking-card form > table:nth-of-type(2) { border-top:0; padding-top:0; margin-bottom:2px; }
/* Scoped to the actual hour/minute selects by name, instead of the previous
   ":nth-of-type(2) select" rule, which also matched the Rueckgabeort
   (CityID_end) select in the same table and truncated it to 42px wide. */
.grcar-booking-card select[name=sHour],
.grcar-booking-card select[name=sMin],
.grcar-booking-card select[name=eHour],
.grcar-booking-card select[name=eMin] { display:inline-block; width:62px !important; min-height:32px; padding:0 2px; }
/* Was width:calc(100% - 146px), sized for an older layout where the time
   selects sat on the same line as the date field. They now render on their
   own row below (see .grcar-time-controls), so that reserved 146px just
   left the date field narrower than the select above it, with empty space
   on its right -- not flush with the select's right edge. Full width here
   makes both rows line up exactly. */
.grcar-date-control { position:relative; display:inline-block; width:100%; vertical-align:middle; }
/* HTML::input()'s date-field branch (libs/controls/HTMLControls.php) mangles
   its own "type=textbox" argument into a malformed type="type=textbox"
   attribute, so these date fields never actually match the type=text /
   type=textbox selectors above and silently fall back to the browser's
   default 2px input border -- visibly thicker/taller-looking than the
   1px-bordered selects next to them. Matched here by [name=...] instead,
   which the markup always renders correctly, so the same border/radius/
   background as the selects applies regardless of that upstream bug. Not
   fixing HTMLControls.php itself: it's a shared helper used by every date
   field across the whole project (incl. the separate admin.grcar.gr copy),
   so a safe fix there is a larger, separately-scoped change. */
.grcar-booking-card input[name=sdate],
.grcar-booking-card input[name=edate] {
	display:block;
	width:100% !important;
	height:36px;
	padding:0 10px 0 38px;
	margin:10px 0 0;
	border:1px solid var(--gr-line);
	border-radius:9px;
	background:#fff;
	color:var(--gr-ink);
	font-size:14px;
	box-sizing:border-box;
}
.grcar-date-control .grcar-calendar-trigger { position:absolute; top:50%; left:4px; right:auto; transform:translateY(-50%); z-index:2; }
.grcar-date-control .grcar-calendar-clear { display:none; }
/* Shifted left (was margin-left:4px) so the clock icon lines up directly
   under the calendar icon above it, instead of sitting ~18px further right;
   the hour/minute selects move with it since they share this row. */
.grcar-time-controls { display:inline-flex; align-items:center; gap:4px; margin:10px 0 0 -17px; vertical-align:middle; }
.grcar-time-icon { display:inline-flex; align-items:center; justify-content:center; align-self:center; width:22px; height:22px; margin:0 2px 0 0; color:var(--gr-blue); font-size:22px; line-height:1; position:relative; top:5px; }
.grcar-booking-card .sub_button {
	width:100%;
	min-height:48px;
	margin-top:12px;
	border:0;
	border-radius:10px;
	background:var(--gr-blue);
	font-size:15px;
	font-weight:700;
	letter-spacing:.02em;
	box-shadow:0 8px 18px rgba(30,86,199,.22);
}
/* Round 12, task 3: the open-calendar button is a legacy <input type=button
   value='▣'> (libs/controls/HTMLControls.php) -- its "icon" is literally the
   button's text value, rendered as U+25A3 WHITE SQUARE CONTAINING BLACK
   SMALL SQUARE in the page's plain Arial fallback. In this stack's rendering
   environment that glyph does not render as a recognizable calendar symbol
   at all -- it paints as a small solid blue square, exactly the "broken icon"
   reported. Root cause confirmed live (inspected the real DOM/computed
   style): not a missing icon-font, not a wrong CSS class, not a wrong asset
   path -- it is this specific Unicode character being used as a text icon
   with no font on this stack that renders it as an actual calendar glyph.
   Fixed without touching PHP/the date-picker widget/field names: the button
   text is hidden (color/font-size collapsed to 0) and a small inline SVG
   calendar icon is drawn as a background-image instead, in the same --gr-blue
   used everywhere else for interactive icon accents. onclick/CalendarOpen(),
   the <input> element, its name/id and the popup calendar JS are untouched.
   The "×" clear button (.grcar-calendar-clear, same base class) explicitly
   restores its own visible text/color below so it keeps showing "×", not the
   calendar icon. */
.grcar-calendar-trigger {
	width:24px;
	min-height:24px;
	margin:0 3px;
	padding:0;
	border:0;
	color:transparent;
	font-size:0;
	line-height:1;
	cursor:pointer;
	vertical-align:middle;
	background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e56c7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2.5'/%3E%3Cline x1='3.5' y1='9.5' x2='20.5' y2='9.5'/%3E%3Cline x1='7.5' y1='3' x2='7.5' y2='6.5'/%3E%3Cline x1='16.5' y1='3' x2='16.5' y2='6.5'/%3E%3C/svg%3E") center/18px 18px no-repeat;
}
.grcar-calendar-clear { background-image:none; color:#6d7890; font-size:15px; }

/* Round 13, task B2: calendar popup visual modernization (CSS only).
   Investigated first: the widget is the third-party "DHTML Calendar"
   library (www_admin/js_css/calendar.js + calendar.css, Mihai Bazon,
   2002/2003), loaded by libs/controls/HTMLControls.php alongside a
   language file (cal_lang/{english,germany,greek}.js -- all three already
   define real, fully-translated month/weekday names and UI strings; no
   language gap exists at the library level). The library's own
   calendar.css renders a dated beveled Windows-98-style grey skin
   (#d4d0c8 background, inset/outset borders) that doesn't match this
   site's light, modern form fields. Min/max-date rules, the
   start/end-date interdependency, the dd/mm/y field format, the
   onclick="CalendarOpen(...)" wiring and every id/name on the trigger
   input are untouched -- confirmed live after this change still updates
   the correct field on date pick, same as before. Only calendar.js's
   OWN calendar.css file governs the popup's look; nothing here touches
   calendar.js. Because calendar.css is linked to the page after this
   stylesheet (HTMLControls.php injects it at the point the date field is
   rendered, later in document order than this file's single <head>
   <link>), these rules use !important on the visual properties that must
   win, consistent with this project's established pattern for the same
   late-cascade situation (see the .grcar-shell height fix, round 12).

   Round 14 refinement (precise match to the approved simple/elegant
   reference): round 13's shadow was heavier than "very restrained/soft";
   softened below. Round 14 also found and fixes a real, confirmed bug:
   the library's own markup gives the nav-arrow row (<tr class="headrow">,
   containing <<, <, "Today", >, >>) NO class of its own for styling, so
   round 13's ".calendar thead .headrow" rule (meant to extend the navy
   month-heading bar) had painted that ENTIRE row navy -- but the nav
   buttons inside it inherit ".calendar .button"'s navy TEXT color, so the
   arrows rendered as invisible navy-on-navy (confirmed live via
   getComputedStyle: tr.headrow background rgb(16,35,79), button text
   color rgb(16,35,79), button background transparent). This also produced
   a second dark bar directly under the real navy month-heading bar,
   violating "no dark bars". Fixed below by giving the nav row a light
   background instead, with its own hover/active states -- the real
   month-heading title bar (".calendar thead .title") is untouched and
   stays the one dark navy element. */
/* Round 22, task A: the calendar had no explicit width, so the browser's
   table auto-layout shrunk every column (including the 8th/KW column) to
   whatever the em-based font-size-driven cell sizing happened to produce
   -- about 226px total, well under a usable size, which is what made the
   grid look cramped and pushed the title/nav row's own content wider
   than the day grid beneath it. Giving the day/wn cells explicit px
   widths (not em, so they don't drift with font-size) and the container
   a target width fixes this without `transform:scale()`/`zoom`; the
   existing `max-width:calc(100vw - 16px)` still caps it on narrow
   screens so nothing overflows there. No table-layout:fixed (would risk
   misaligning the title/headrow colspans against the 8 real day
   columns) -- auto-layout already sizes columns from unspanned body
   cells reliably once those cells carry explicit widths. */
.calendar {
	border:1px solid var(--gr-line) !important;
	border-radius:12px !important;
	background:var(--gr-surface) !important;
	box-shadow:0 6px 18px rgba(16,35,79,.10) !important;
	font-family:inherit !important;
	font-size:13px !important;
	overflow:hidden;
	width:350px;
	max-width:calc(100vw - 16px);
}
.calendar table {
	width:100% !important;
	table-layout:fixed;
	border:0 !important;
	background:var(--gr-surface) !important;
	font-family:inherit !important;
	font-size:13px !important;
}
.calendar .button {
	padding:4px !important;
	border:0 !important;
	color:var(--gr-navy);
	border-radius:6px;
}
/* Round 20: spec now explicitly reverses rounds 13/14's full-width navy
   title bar -- "month name and year centered, dark-blue semi-bold TEXT,
   no dark-blue bar across the whole month heading". Title row (the "-"
   toggle, the month/year text, and the "x" close button when popped up)
   is now plain white/transparent like the rest of the container; the
   "-"/"x" buttons become small muted icons instead of white-on-navy. */
.calendar thead .title {
	padding:12px 4px !important;
	border:0 !important;
	border-bottom:1px solid var(--gr-line) !important;
	background:var(--gr-surface) !important;
	color:var(--gr-navy) !important;
	font-weight:600 !important;
	font-size:14.5px;
	text-align:center;
	letter-spacing:.01em;
	/* Round 22: drag-to-reposition is disabled (see vitrine.html's
	   _dragStart override) -- the library still sets an inline
	   cursor:move on this element, so it's overridden back to the
	   ordinary default here with !important (beats the inline style). */
	cursor:default !important;
}
.calendar thead tr:first-child { background:var(--gr-surface) !important; }
.calendar thead tr:first-child .button {
	color:var(--gr-muted);
	font-size:12px;
	font-weight:400;
	border-bottom:1px solid var(--gr-line) !important;
}
.calendar thead .headrow {
	background:var(--gr-surface) !important;
	border-bottom:1px solid var(--gr-line) !important;
}
.calendar thead .headrow .button {
	font-size:15px;
	font-weight:700;
}
/* Round 19 removed the extra prev-year/next-year arrows (first/last
   child). Round 20: spec now also forbids the "Today" quick-nav text
   ("no extra Today navigation row / no superfluous quick-nav controls"),
   so the one remaining middle button (Today, the 3rd of the row's
   original 5) is hidden too -- leaving exactly the ‹ › month-change pair
   the spec asks for. Purely CSS; the library's prevYear()/nextYear()/
   goToday() handlers still exist, just unreachable by click, same
   approach as every prior calendar round. */
.calendar thead .headrow .button:first-child,
.calendar thead .headrow .button:nth-child(3),
.calendar thead .headrow .button:last-child { display:none; }
.calendar thead .name {
	border:0 !important;
	border-bottom:1px solid var(--gr-line) !important;
	padding:6px 2px !important;
	background:var(--gr-soft) !important;
	color:var(--gr-muted) !important;
	font-weight:700;
	text-transform:uppercase;
	font-size:11px;
	letter-spacing:.02em;
}
/* Spec: "don't needlessly color Saturday/Sunday red" -- weekend days now
   read the same as any other day. */
.calendar thead .weekend { color:var(--gr-muted) !important; }
/* Hover/active state on the (now white) title row -- a translucent-white
   overlay (round 14's choice, correct on navy) would be invisible here,
   so this gets a light neutral overlay suited to a white background. */
.calendar thead tr:first-child .hilite {
	border:0 !important;
	padding:4px !important;
	background:var(--gr-soft) !important;
	border-radius:6px;
}
.calendar thead tr:first-child .active {
	padding:4px !important;
	border:0 !important;
	background:var(--gr-line) !important;
}
.calendar thead .headrow .hilite {
	border:0 !important;
	padding:4px !important;
	background:var(--gr-line) !important;
	border-radius:6px;
}
.calendar thead .headrow .active {
	padding:4px !important;
	border:0 !important;
	background:#cfd8e8 !important;
}
/* Round 21: spec now explicitly forbids circular/pill shapes anywhere in
   the date grid (supersedes round 19's "blue circle" choice) -- every day
   cell and the KW cells are rectangular with a max 4px corner radius. */
.calendar tbody .day {
	width:44px;
	height:44px;
	line-height:44px;
	padding:0 !important;
	text-align:center !important;
	color:var(--gr-ink);
	background:var(--gr-surface);
	border-radius:4px;
	box-sizing:border-box;
}
/* Round 20, task 5: the ISO-week column is now the explicitly-required
   "dezent hellblau" highlighted column -- a light, continuous blue tint
   (not the neutral gray surface used elsewhere), separated from the day
   grid by the existing fine vertical border. Header cell ("name wn", the
   KW/Wk/Εβδ. label) and body cells ("day wn", the week numbers) share
   this column background via the single ".wn" class the library already
   gives both; body cells additionally get the navy semi-bold number
   weight the spec asks for. */
.calendar table .wn {
	width:38px !important;
	padding:0 !important;
	border:0 !important;
	border-right:1px solid var(--gr-line) !important;
	background:rgba(30,86,199,.07) !important;
	color:var(--gr-navy);
	font-size:11px;
	text-align:center;
}
.calendar thead .name.wn {
	color:var(--gr-navy) !important;
	font-weight:700;
	text-transform:none;
}
.calendar tbody td.day.wn { font-weight:600; }
/* The actual current ISO week (computed from today's real date, never
   hardcoded -- see the JS in vitrine.html) gets a visibly stronger tint
   than the rest of the KW column, but still clearly lighter than the
   selected-day blue circle below. */
.calendar tbody td.day.wn.wn-current { background:rgba(30,86,199,.22) !important; font-weight:700; }
.calendar tbody .rowhilite td { background:transparent !important; }
.calendar tbody .rowhilite td.wn { background:rgba(30,86,199,.07) !important; }
.calendar tbody td.hilite {
	padding:0 !important;
	border:0 !important;
	background:#e7eefb !important;
	border-radius:4px;
}
.calendar tbody td.active {
	padding:0 !important;
	border:0 !important;
	background:#d7e3f9 !important;
	border-radius:4px;
}
.calendar tbody td.selected {
	/* Round 21: spec now explicitly asks for "a blue, slightly rounded
	   SQUARE with a white number" -- no circles anywhere in the grid
	   (supersedes round 19's blue-circle choice). */
	font-weight:700 !important;
	border:0 !important;
	padding:0 !important;
	background:var(--gr-blue) !important;
	color:#fff !important;
	border-radius:4px;
}
/* Spec: "don't needlessly color Saturday/Sunday red". */
.calendar tbody td.weekend { color:var(--gr-ink) !important; }
.calendar tbody td.today {
	font-weight:700 !important;
	color:var(--gr-blue) !important;
	box-shadow:inset 0 0 0 1px var(--gr-blue);
	border-radius:4px;
}
.calendar tbody .disabled { color:#c3cadb !important; }
.calendar tbody .emptycell { visibility:hidden; }
.calendar tfoot .ttip {
	padding:6px !important;
	border:0 !important;
	border-top:1px solid var(--gr-line) !important;
	background:var(--gr-soft) !important;
	color:var(--gr-muted) !important;
	font-size:11px;
}
.calendar tfoot .hilite {
	border:0 !important;
	padding:5px !important;
	background:#e7eefb !important;
	border-radius:6px;
}
.calendar tfoot .active {
	padding:5px !important;
	border:0 !important;
	background:#d7e3f9 !important;
}
.combo {
	border:1px solid var(--gr-line) !important;
	border-radius:10px !important;
	background:var(--gr-surface) !important;
	box-shadow:0 10px 24px rgba(16,35,79,.18) !important;
	font-size:12px !important;
	padding:4px !important;
	overflow:hidden;
}
.combo .label { padding:4px 6px !important; border-radius:6px; color:var(--gr-ink); }
.combo .active { background:var(--gr-blue) !important; color:#fff !important; padding:4px 6px !important; border:0 !important; border-radius:6px; }
.combo .hilite { background:#e7eefb !important; color:var(--gr-navy) !important; border-radius:6px; }
@media (max-width:480px) {
	.calendar { font-size:12px !important; width:298px; }
	.calendar tbody .day { width:38px; height:38px; line-height:38px; padding:0 !important; }
	.calendar table .wn { width:32px !important; }
}
.grcar-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.grcar-booking-card > tbody > tr:last-child { display:none; }
.grcar-page .grcar-destinations {
	width:min(1180px, calc(100% - 48px)) !important;
	height:auto !important;
	min-height:86px;
	margin:16px auto 28px;
	background:#f7f9fd !important;
	border-radius:14px;
}
/* The legacy booking form must keep both CityID_start and CityID_end (plus
   date/time) always visible and independent (functional contract). The card
   now participates in the Hero flow, so the Benefits section can follow it
   with a normal content gap instead of a compensating absolute-layout margin.
   Round 11, task 2: margin-top tightened further (24px -> 18px) as part of
   the overall vertical-compactness pass; the bar's own internal design
   (icons/rating/layout) is unchanged. */
.grcar-benefits { width:min(1180px, calc(100% - 48px)); min-height:82px; margin:18px auto 0; display:flex; align-items:center; justify-content:space-around; gap:22px; padding:18px 32px; box-sizing:border-box; background:#f7f9fd; border-radius:12px; color:var(--gr-ink); }
/* Round 7, scope 2: premium typographic hierarchy for the body-text
   sections. Same copy/markup, no new wrapper — only size/weight/color/
   spacing rules change. Content width trimmed from 1180px to the requested
   760-850px band so paragraphs read at a comfortable line length; the main
   heading moves from the flat brand-blue (used everywhere, including small
   UI accents, which made it compete visually) to the dedicated dark navy
   token, reserving the brighter --gr-blue only for the small eyebrow-style
   accents. h1 and h2 are now sized/weighted apart instead of nearly
   matching, and h2 gets a hairline top rule + extra top margin so each
   subsection reads as a distinct, calmly-paced block instead of a wall of
   same-weight text. */
.grcar-legacy-copy { box-sizing:border-box; max-width:820px; margin:56px auto 0; padding:0 24px; color:#425066; font-size:16px; line-height:1.75; }
.grcar-legacy-copy h1 { margin:0 0 14px; color:var(--gr-navy); font-weight:800; font-size:clamp(26px, 3.2vw, 36px); line-height:1.15; letter-spacing:-.01em; text-align:center; }
.grcar-legacy-copy > h1:first-child + p,
.grcar-legacy-copy > p:first-of-type { text-align:center; font-size:17px; color:#56657a; }
.grcar-legacy-copy h2 { margin:40px 0 12px; padding-top:28px; border-top:1px solid var(--gr-line); color:var(--gr-navy); font-weight:700; font-size:clamp(18px, 2vw, 21px); line-height:1.3; letter-spacing:-.005em; }
.grcar-legacy-copy h2:first-of-type { margin-top:34px; }
.grcar-legacy-copy p { max-width:760px; margin:0 auto 16px; }
/* Round 34: real lists for the AGB's bullet-point clauses (insurance
   coverage / exclusion conditions), replacing "- item<br>" runs with
   semantic <ul><li> -- same text width as the surrounding paragraphs,
   same rhythm, no new typography scale. */
.grcar-legacy-copy ul { max-width:760px; margin:0 auto 16px; padding-left:1.4em; }
.grcar-legacy-copy ul li { margin:0 0 8px; }
.grcar-legacy-copy ul li:last-child { margin-bottom:0; }
.grcar-benefits > div { display:flex; align-items:center; gap:14px; min-width:0; }
.grcar-benefits strong { display:flex; align-items:center; justify-content:center; width:40px; height:40px; flex:0 0 40px; border-radius:10px; background:#e7eefb; color:var(--gr-blue); font-size:18px; font-weight:700; }
.grcar-benefits span { font-size:14px; font-weight:700; white-space:nowrap; }
.grcar-benefits small { display:block; margin-top:4px; color:#56657a; font-size:11px; font-weight:400; }
.grcar-rating { border-left:1px solid var(--gr-line); padding-left:26px; }
.grcar-rating strong { width:auto; height:auto; background:none; padding:0; font-size:22px; }
/* Round 12, task 2: "Deine Reise. Dein Tempo." harmonized into one section.
   Previously the heading and the photo row were independent float:left /
   float:right siblings with no shared surface -- that produced uneven
   spacing to the benefits bar above and the footer below, no real vertical
   alignment control between the text block and the photos, and (as a side
   effect) was the last pair of floated direct children of the shell's
   content <td>, which blocked task 6's flex sticky-footer chain from working
   safely on the homepage (floats as flex-container children compute
   float:none and lose their layout). Replacing float with flex inside the
   new .grcar-travel-section wrapper (main.html) removes both problems at
   once. Photos, captions, links and copy are unchanged -- only the layout
   mechanism, spacing, background and alignment. */
.grcar-travel-section {
	box-sizing:border-box;
	width:min(1180px, calc(100% - 48px));
	margin:32px auto 36px;
	padding:32px;
	display:flex;
	align-items:center;
	gap:40px;
	background:#fbfcfe;
	border:1px solid var(--gr-line);
	border-radius:16px;
}
.grcar-destinations-heading { flex:0 0 min(340px, 32%); width:auto; min-width:0; margin:0; color:var(--gr-ink); text-align:left; }
.grcar-destinations-heading span { color:var(--gr-blue); font-size:12px; font-weight:700; letter-spacing:.08em; }
.grcar-destinations-heading h2 { margin:10px 0 10px; font-size:clamp(26px, 2.6vw, 32px); line-height:1.18; }
.grcar-destinations-heading p { max-width:360px; margin:0; font-size:14.5px; line-height:1.6; }
.grcar-destinations { flex:1 1 auto; min-width:0; width:auto !important; margin:0 !important; background:transparent !important; gap:18px; padding:0; display:flex; }
.grcar-page .grcar-destinations { width:auto !important; margin:0 !important; }
.grcar-destinations > tbody,
.grcar-destinations > tbody > tr { display:flex; width:100%; gap:18px; }
.grcar-destinations td { border:0; }
.grcar-destinations td[width="200"] {
	width:31.3% !important;
	flex:1 1 0;
	height:230px;
	border-radius:14px;
	overflow:hidden;
	box-shadow:0 8px 20px rgba(16,35,79,.1);
}
.grcar-destinations td[width="200"] img,
.grcar-destinations td[width="200"] a { display:block; width:100%; height:100%; }
.grcar-destinations td[width="200"] img { object-fit:cover; object-position:center center; background:#eef2f8; }
/* Round 19, task C: pin all three labels to the same top-right spot. Before
   this, .grcar-destination-label had `position:absolute` but no
   top/right offsets, so each label fell back to its own static position in
   that card's particular markup (Thessaloniki's td uses a CSS background-image
   with the label as its only content; Chalkidiki/Olymp use an <img> with the
   label span before it in the same <a>) -- those two different markups put
   the label in two different spots. Explicit top/right fixes all three to
   an identical corner regardless of each card's internal markup. */
.grcar-destination-label { position:absolute; top:14px; right:14px; z-index:1; margin:0; padding:6px 10px; border-radius:7px; background:rgba(255,255,255,.92); color:var(--gr-navy); font-size:13px; font-weight:700; line-height:1.2; white-space:nowrap; }
.grcar-destinations td[width="200"] { position:relative; }
.grcar-destinations td[width="200"] { background-color:#eef2f8 !important; background-size:cover !important; background-position:center center; background-repeat:no-repeat !important; }
.grcar-destinations td[width="200"][style*="thessaloniki"] { background-position:center 38% !important; }
.grcar-destinations td[width="200"]:has(img[src*="chalkidiki"]) img { object-position:center 48%; }
.grcar-destinations td[width="200"]:has(img[src*="olymp"]) img { object-position:center 42%; }
.grcar-destinations td:not([width="200"]) { display:none; }
/* Reference shows exactly 3 destination cards (Thessaloniki/Halkidiki/Olymp);
   the legacy markup has 4 ad-banner <td>s. The 4th (banner-3, a payment-on-
   arrival banner, not a destination photo) is hidden here to match the
   reference's card count without editing the template HTML. The remaining 3
   still use legacy ad-banner images as placeholders — see HANDOFF/report for
   the open asset gap (no Thessaloniki/Halkidiki/Olymp photos exist in-repo). */
.grcar-destinations td[width="200"]:has(img[src*="banner-3"]) { display:none; }
.grcar-shell > tbody > tr > td > table:last-child { display:none; }
@media (max-width: 820px) {
	/* Root cause of the mobile/tablet overflow: these legacy tables use the
	   browser default table-layout:auto, where a CSS width is only a
	   suggestion — the table still grows to its content's min-content width
	   (892px from nested fixed-width cells), so width:100% never actually
	   shrinks it below ~892px. table-layout:fixed makes width:100% binding,
	   so columns/cells wrap and shrink to the real viewport instead. */
	.grcar-shell, .grcar-content, .grcar-header, .grcar-vitrine,
	.grcar-vitrine .grcar-booking-card, .grcar-destinations { table-layout:fixed; }
	html, body { overflow-x:hidden; } /* defense-in-depth only, kept after the table-layout fix above; see docs/ONE_WAY_GEOMETRY_AUDIT.md */
	.grcar-nav { width:calc(100% - 28px) !important; min-height:72px; }
	/* gap lives on the actual flex container (tbody) since the round-12 header
	   fix -- see the desktop rule above. */
	.grcar-nav > tbody { min-height:72px; gap:10px; }
	/* Round 11, task 3: the logo is now a real <a> in .grcar-logo-cell (no
	   <img> tag -- its icon is a CSS background). The pre-existing
	   ":not(:has(img))" rule below, written for the old pseudo-element logo,
	   would otherwise hide this real cell at mobile/tablet widths too --
	   excluded explicitly so the logo stays visible next to the hamburger
	   toggle. */
	.grcar-logo-link { width:128px; height:48px; }
	.grcar-nav:not(.is-open) td:not(:has(img)):not(.grcar-logo-cell) { display:none; }
	.grcar-nav:not(.is-open) td:has(img) { display:none; }
	.grcar-nav td:has(img) { margin-left:auto; }
	.grcar-menu-toggle { display:flex; position:absolute; top:14px; right:14px; z-index:3; width:44px; height:44px; align-items:center; justify-content:center; border:1px solid var(--gr-line); border-radius:10px; background:#fff; color:var(--gr-ink); font-size:24px; line-height:1; cursor:pointer; }
	.grcar-menu-icon { pointer-events:none; }
	.grcar-nav.is-open { position:absolute; top:66px; left:14px; right:14px; z-index:4; width:auto !important; min-height:0; padding:10px 0 !important; display:block; background:#fff; border-radius:12px; box-shadow:0 12px 30px rgba(16,35,79,.18); }
	/* Round 12 header fix made .grcar-nav > tbody a ROW-direction flex
	   container by default (desktop single-row layout). The open dropdown
	   needs its two <tr>s stacked, not side by side -- without this, the
	   logo row and the items row rendered as two overlapping row-direction
	   flex items inside the dropdown panel instead of one clean vertical
	   list (found live while testing task 4 at a real, non-touch-emulated
	   mobile-breakpoint width). The logo itself stays hidden here since it
	   is already visible in the collapsed header bar at all times. */
	.grcar-nav.is-open > tbody { display:block; height:auto; min-height:0; }
	.grcar-nav.is-open .grcar-logo-row { display:none; }
	.grcar-nav.is-open tr { display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start !important; height:auto; min-height:0; }
	.grcar-nav.is-open td.grcar-menu-item { display:block; padding:0 16px !important; border:0 !important; }
	.grcar-nav.is-open td.grcar-menu-item a { display:block; min-height:44px; padding:12px 0; color:var(--gr-ink); font-size:16px; }
	.grcar-nav.is-open td:has(img) { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:6px; margin:0; padding:10px 16px 2px !important; border-top:1px solid var(--gr-line); }
	/* Root cause of mobile horizontal overflow: the desktop rule above absolutely
	   positions .grcar-hero-copy and .grcar-booking-card at fixed left offsets
	   (35.2% / 24.9%) with explicit widths, which the old media query never reset.
	   Below, both are taken out of absolute flow and stacked per the mobile
	   reference (heading, then hero image, then full-width booking card). */
	.grcar-vitrine { --grcar-hero-height:220px; --grcar-hero-image-scale:auto 220px; --grcar-hero-image-x:50%; --grcar-hero-image-y:top; height:auto; min-height:0; padding:16px 14px 20px !important; overflow:hidden; background:linear-gradient(180deg,#d9eafa 0%,#eff6fd 35%,#fff 35%); }
	.grcar-vitrine:before { position:relative; display:block; height:220px; margin:0 -14px 16px; }
	.grcar-hero-copy { position:static !important; left:auto !important; top:auto !important; width:100% !important; min-width:0; margin:0 0 16px; text-align:left; }
	.grcar-vitrine td.grcar-hero-copy { width:100% !important; }
	.grcar-hero-copy h1 { font-size:30px; }
	.grcar-vitrine .grcar-booking-card { position:static !important; left:auto !important; top:auto !important; transform:none; width:100% !important; min-width:0; max-width:none; height:auto; margin:0 auto; border-radius:14px; }
	.grcar-booking-card form > table:first-of-type,
	.grcar-booking-card form > table:nth-of-type(2) { flex:0 0 100%; max-width:100%; margin:0 0 14px; }
	.grcar-booking-card > tbody > tr:first-child td { padding:14px 18px 0 !important; }
	.grcar-booking-card > tbody > tr:nth-child(2) > td { padding:0 18px 16px !important; }
	.grcar-booking-card .tbl_order { font-size:20px; }
	.grcar-booking-card select,
	.grcar-booking-card input[type=textbox],
	.grcar-booking-card input[type=text] { min-height:44px; }
	/* Round 12, task 2: the harmonized section stacks heading-above-photos on
	   mobile/tablet, with one consistent padded surface instead of the old
	   independent float margins. */
	.grcar-travel-section { flex-direction:column; align-items:stretch; width:calc(100% - 28px); margin:24px auto 28px; padding:20px; gap:18px; }
	.grcar-destinations-heading { display:block; width:100%; flex:0 0 auto; margin:0; text-align:left; }
	.grcar-page .grcar-destinations { display:flex; width:100% !important; margin:0 !important; flex-wrap:wrap; row-gap:14px; }
	.grcar-destinations > tbody,
	.grcar-destinations > tbody > tr { flex-wrap:wrap; row-gap:14px; }
	.grcar-destinations td[width="200"] { flex:0 0 100% !important; width:100% !important; height:180px; }
	.grcar-destinations td[width="200"] p { font-size:13px; }
	.grcar-benefits { width:calc(100% - 28px); }
	.grcar-benefits { flex-wrap:wrap; justify-content:flex-start; margin-top:22px; }
	.grcar-rating { border-left:0; padding-left:0; }
}
@media (min-width: 821px) and (max-width: 1000px) {
	/* The proportional full-image hero is shorter than the absolute booking
	   card at this intermediate width. Keep the benefits row below the card. */
	.grcar-benefits { margin-top:24px; }
}

/* Tablet layout: iPad portrait widths need their own composition. The phone
   rules correctly stack the booking fields, but the legacy table columns can
   otherwise keep a desktop-sized minimum and leave a large empty side area.
   Keep the readable stacked form while making the card and action full-width. */
@media (min-width: 601px) and (max-width: 820px) {
	.grcar-vitrine .grcar-booking-card {
		width:calc(100% - 28px) !important;
		max-width:none;
		min-width:0;
	}
	.grcar-vitrine .grcar-booking-card form > table:first-of-type,
	.grcar-vitrine .grcar-booking-card form > table:nth-of-type(2) {
		flex:0 0 100%;
		max-width:100%;
	}
	.grcar-vitrine .grcar-booking-card .sub_button { width:100%; }
	.grcar-travel-section { width:calc(100% - 32px); padding:24px; }
	.grcar-destinations td[width="200"] { height:200px; }
}

/* Round 9: legal footer + legal-page typography. Reuses the existing design
   tokens only (--gr-navy/--gr-blue/--gr-muted/--gr-line); no new colors, no
   new images. Appears at the very bottom of the existing 892px content
   column, inside the unchanged .grcar-shell/.grcar-content container. */
.grcar-footer {
	/* Round 11, task 2: tightened from 48px as part of the vertical-
	   compactness pass (photos -> footer gap); the decorative blue divider
	   bar directly above the footer in main.html is unchanged. */
	margin-top:28px;
	padding:20px 16px 26px;
	border-top:1px solid var(--gr-line);
	text-align:center;
}
.grcar-footer-links {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	gap:10px 22px;
	margin:0 0 10px;
	padding:0;
}
.grcar-footer-links a {
	color:var(--gr-muted);
	font-size:14px;
	line-height:1.3;
	text-decoration:none;
	letter-spacing:.01em;
	padding:4px 2px;
}
.grcar-footer-links a:hover,
.grcar-footer-links a:focus {
	color:var(--gr-blue);
	text-decoration:underline;
}
.grcar-footer-copy {
	margin:0;
	color:var(--gr-muted);
	font-size:12.5px;
}
@media (max-width:820px) {
	.grcar-footer { margin-top:22px; padding:16px 12px 20px; }
	.grcar-footer-links { gap:8px 14px; }
	.grcar-footer-links a { font-size:13.5px; }
}

/* Legal page body copy: reuse .grcar-legacy-copy typography tokens, add a
   left-aligned reading mode (the legacy rule centers the first heading/
   paragraph, which doesn't suit multi-section legal text) and a visible
   style for the inline "Freigabepunkt" placeholder flags. */
.grcar-legal-page { text-align:left; padding-top:28px; padding-bottom:12px; }
.grcar-legal-page h1 { text-align:left; }
.grcar-legal-page > h1:first-child + p,
.grcar-legal-page > p:first-of-type { text-align:left; }
.grcar-legal-page code {
	background:var(--gr-soft);
	border:1px solid var(--gr-line);
	border-radius:4px;
	padding:1px 5px;
	font-size:13px;
}

/* Round 31: standalone AGB page -- table of contents (2 columns desktop,
   1 column mobile) + per-section anchors. scroll-margin-top keeps a
   jumped-to heading clear of the top of the viewport even though this
   site has no fixed/sticky header today, as a safe default. */
.grcar-agb-toc {
	max-width:760px;
	margin:0 auto 32px;
	padding:18px 20px;
	background:var(--gr-soft);
	border:1px solid var(--gr-line);
	border-radius:12px;
}
.grcar-agb-toc-title { margin:0 0 10px; padding:0; border:none; font-size:15px; }
.grcar-agb-toc-cols { display:grid; grid-template-columns:1fr 1fr; gap:4px 24px; }
.grcar-agb-toc-col { margin:0; padding-left:1.4em; }
.grcar-agb-toc-col li { margin:0 0 6px; }
.grcar-agb-toc-col a { color:var(--gr-blue); text-decoration:none; }
.grcar-agb-toc-col a:hover,
.grcar-agb-toc-col a:focus-visible { text-decoration:underline; }
.grcar-agb-section { scroll-margin-top:16px; }
@media (max-width:600px) {
	.grcar-agb-toc-cols { grid-template-columns:1fr; }
}

/* Round 32: floating "back to top" button, AGB page only. Shown/hidden by
   the page's own inline script past ~400px scroll (toggles the `hidden`
   attribute set in the markup); CSS only handles appearance/position. */
.grcar-agb-top {
	position:fixed;
	right:20px;
	bottom:28px;
	z-index:40;
	width:48px;
	height:48px;
	min-width:44px;
	min-height:44px;
	border:none;
	border-radius:50%;
	background:var(--gr-navy);
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	box-shadow:0 4px 14px rgba(16,35,79,.3);
	cursor:pointer;
}
.grcar-agb-top[hidden] { display:none; }
.grcar-agb-top svg { width:20px; height:20px; }
.grcar-agb-top:hover,
.grcar-agb-top:focus-visible { background:var(--gr-blue); }
.grcar-agb-top:focus-visible { outline:2px solid #fff; outline-offset:2px; }
@media (max-width:600px) {
	.grcar-agb-top { right:16px; bottom:20px; }
}

/* Round 10, task 5: the single long German copy block (previously
   .grcar-legacy-copy) reflowed into two calm, premium info containers,
   same existing copy, no new marketing claims. Desktop: two equal columns.
   Mobile/tablet: stacked, no fixed heights (content determines height). */
.grcar-info-columns {
	box-sizing:border-box;
	max-width:1180px;
	margin:32px auto 0;
	padding:0 24px;
	display:grid;
	/* Round 11, task 1/2: auto-fit/minmax instead of a fixed 2-column grid so
	   3 equal cards fit on large desktop, 2 reflow at medium widths once 3
	   columns no longer fit at >=280px each, and 1 column remains for narrow
	   viewports -- without a hard-coded column-count breakpoint. */
	grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
	gap:24px;
	align-items:start;
}
.grcar-info-card {
	box-sizing:border-box;
	padding:26px 28px;
	border:1px solid var(--gr-line);
	border-radius:14px;
	background:#fbfcfe;
	color:#425066;
	font-size:16.5px;
	line-height:1.75;
	min-width:0;
	overflow-wrap:break-word;
}
.grcar-info-card h1,
.grcar-info-card h2 {
	margin:0 0 14px;
	color:var(--gr-navy);
	font-weight:800;
	font-size:clamp(19px, 2vw, 22px);
	line-height:1.2;
	letter-spacing:-.005em;
}
.grcar-info-card h2 { margin-top:26px; padding-top:22px; border-top:1px solid var(--gr-line); font-size:clamp(17px, 1.8vw, 19px); font-weight:700; }
.grcar-info-card > h2:first-child { margin-top:0; padding-top:0; border-top:0; }
.grcar-info-card p { margin:0 0 14px; }
.grcar-info-card p:last-child { margin-bottom:0; }
.grcar-info-card.grcar-modal-trigger { cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.grcar-info-card.grcar-modal-trigger:hover,
.grcar-info-card.grcar-modal-trigger:focus-visible { transform:translateY(-3px); border-color:#b8ccef; box-shadow:0 14px 30px rgba(16,35,79,.12); outline:none; }
@media (max-width:600px) {
	.grcar-info-columns { margin-top:24px; padding:0 16px; gap:16px; }
	.grcar-info-card { padding:22px 20px; font-size:16px; }
}

/* Build-to-goal: modern presentation for original catalog/content screens.
   Controllers, queries, field names and booking actions remain untouched. */
.screen-show_cars .grcar-content,
.screen-cars_details .grcar-content,
.screen-showsite .grcar-content,
.screen-agb .grcar-content { padding:24px 28px 48px; }
.grcar-catalog,.grcar-detail,.grcar-content-page { max-width:1180px; margin:0 auto; padding:28px 24px 48px; box-sizing:border-box; }
.grcar-section-heading,.grcar-detail-heading { margin-bottom:26px; }
.grcar-section-heading h1,.grcar-detail-heading h1,.grcar-content-page h1 { margin:4px 0 8px; color:var(--gr-navy); font-size:clamp(28px,4vw,42px); line-height:1.08; }
.grcar-section-heading p:last-child { margin:0; color:#56657a; line-height:1.6; }
.grcar-eyebrow,.grcar-car-category { margin:0; color:var(--gr-blue); font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.grcar-catalog-categ { margin-bottom:38px; }
.grcar-catalog-categ:last-child { margin-bottom:0; }
.grcar-catalog-categ-heading { display:flex; align-items:baseline; gap:12px; margin-bottom:16px; padding-bottom:10px; border-bottom:1px solid var(--gr-line); }
.grcar-catalog-categ-heading h2 { margin:0; color:var(--gr-navy); font-size:20px; }

/* Round 19, task A: compact interactive category filter, client-side only
   (no page reload). Pills scroll horizontally on narrow screens instead
   of wrapping/clipping. */
.grcar-catalog-nav {
	display:flex;
	gap:8px;
	margin:0 0 26px;
	padding-bottom:4px;
	overflow-x:auto;
	-webkit-overflow-scrolling:touch;
	scrollbar-width:thin;
}
.grcar-catalog-nav-btn {
	flex:none;
	padding:9px 18px;
	border:1px solid var(--gr-line);
	border-radius:999px;
	background:var(--gr-surface);
	color:var(--gr-ink);
	font-size:13.5px;
	font-weight:700;
	letter-spacing:.01em;
	cursor:pointer;
	transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.grcar-catalog-nav-btn:hover { border-color:var(--gr-blue); color:var(--gr-blue); }
.grcar-catalog-nav-btn.is-active { background:var(--gr-blue); border-color:var(--gr-blue); color:#fff; }
.grcar-catalog-categ[hidden] { display:none; }
@media (max-width:560px) {
	.grcar-catalog-nav { margin-bottom:20px; }
	.grcar-catalog-nav-btn { padding:8px 16px; font-size:13px; }
}
.grcar-catalog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.grcar-car-card { display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--gr-line); border-radius:16px; background:#fff; box-shadow:0 8px 24px rgba(16,35,79,.08); transition:transform .18s ease, box-shadow .18s ease; }
.grcar-car-card:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(16,35,79,.13); }
.grcar-car-card[hidden] { display:none; }
.grcar-car-card-image { display:flex; align-items:center; justify-content:center; height:190px; overflow:hidden; background:#fff; border-bottom:1px solid #edf1f7; }
.grcar-car-card-image img { width:100%; height:100%; object-fit:contain; transition:transform .2s ease; }
.grcar-car-card:hover .grcar-car-card-image img { transform:scale(1.03); }
.grcar-car-card-body { display:flex; flex:1; flex-direction:column; padding:18px 20px 20px; }
.grcar-car-card h2 { margin:5px 0 4px; color:var(--gr-navy); font-size:21px; }
.grcar-car-meta { min-height:20px; margin:0 0 16px; color:#56657a; }
.grcar-outline-button,.grcar-back-link { color:var(--gr-blue); font-weight:700; text-decoration:none; }
.grcar-outline-button { display:inline-flex; align-items:center; align-self:flex-start; min-height:40px; padding:0 14px; border:1px solid #b9c9e6; border-radius:8px; }
.grcar-outline-button:hover,.grcar-outline-button:focus-visible { background:#edf3fd; }
.grcar-back-link { display:inline-block; margin-bottom:18px; }
.grcar-detail-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:30px; align-items:start; }
.grcar-detail-image { min-height:420px; display:flex; align-items:center; justify-content:center; border:1px solid var(--gr-line); border-radius:16px; background:#fff; }
.grcar-detail-image img { max-width:100%; max-height:420px; object-fit:contain; }
.grcar-spec-card { padding:24px; border:1px solid var(--gr-line); border-radius:16px; background:#fff; box-shadow:0 8px 24px rgba(16,35,79,.06); }
.grcar-spec-card h2 { margin:0 0 16px; color:var(--gr-navy); font-size:22px; }
.grcar-spec-list { display:grid; grid-template-columns:1fr auto; margin:0; }
.grcar-spec-list dt,.grcar-spec-list dd { padding:10px 0; border-bottom:1px solid #e8edf5; }
.grcar-spec-list dt { color:#56657a; }.grcar-spec-list dd { margin:0; color:var(--gr-ink); font-weight:700; text-align:right; }
.grcar-content-page { max-width:900px; }.grcar-rich-content { color:#33435a; font-size:16px; line-height:1.75; }.grcar-rich-content a { color:var(--gr-blue); }.grcar-content-page h2 { color:var(--gr-navy); margin-top:28px; }
.grcar-faq-index { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:24px 0 34px; padding:18px; border:1px solid var(--gr-line); border-radius:12px; background:#f7f9fd; }.grcar-faq-index a { color:var(--gr-blue); font-weight:700; text-decoration:none; }.grcar-faq-list section { padding:0 0 22px; margin-bottom:22px; border-bottom:1px solid var(--gr-line); }
@media (max-width:820px) { .grcar-catalog,.grcar-detail,.grcar-content-page { padding:22px 16px 36px; }.grcar-catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.grcar-detail-grid { grid-template-columns:1fr; }.grcar-detail-image { min-height:260px; } }
@media (max-width:560px) { .grcar-catalog-grid,.grcar-faq-index { grid-template-columns:1fr; }.grcar-car-card-image { height:210px; }.grcar-spec-card { padding:18px; } }

/* Round 10, task 2/3: reusable modal dialog component (native <dialog>,
   WAI-ARIA dialog (modal) pattern). Appears above the page, dims the
   background via ::backdrop, main page stays mounted underneath. */
.grcar-modal { padding:0; border:0; border-radius:16px; width:min(680px, calc(100% - 32px)); max-height:min(82vh, 760px); box-shadow:0 24px 60px rgba(16,35,79,.3); }
.grcar-modal::backdrop { background:rgba(16,23,42,.55); }
.grcar-modal-inner { position:relative; max-height:min(82vh, 760px); display:flex; flex-direction:column; }
.grcar-modal-close {
	position:absolute;
	top:10px;
	right:10px;
	width:36px;
	height:36px;
	border:0;
	border-radius:8px;
	background:var(--gr-soft);
	color:var(--gr-ink);
	font-size:22px;
	line-height:1;
	cursor:pointer;
}
.grcar-modal-close:hover,
.grcar-modal-close:focus-visible { background:#e7eefb; color:var(--gr-blue); }
.grcar-modal-body { overflow-y:auto; padding:48px 32px 32px; }
.grcar-modal-content { color:#425066; font-size:15px; line-height:1.7; }
.grcar-modal-content h1 { margin:0 0 14px; color:var(--gr-navy); font-size:22px; text-align:left !important; }
.grcar-modal-content h2 { margin:24px 0 10px; padding-top:18px; border-top:1px solid var(--gr-line); color:var(--gr-navy); font-size:17px; text-align:left !important; }
.grcar-modal-content p { margin:0 0 14px; text-align:left !important; }
.grcar-modal-content code { background:var(--gr-soft); border:1px solid var(--gr-line); border-radius:4px; padding:1px 5px; font-size:13px; }
body.grcar-modal-open { overflow:hidden; }
@media (max-width:600px) {
	.grcar-modal { width:calc(100% - 20px); max-height:88vh; border-radius:12px; }
	.grcar-modal-inner { max-height:88vh; }
	.grcar-modal-body { padding:44px 18px 22px; }
}

/* Round 11, task 4: premium contact-page redesign. Visual-only restyle of
   application/template/screen/contact.html -- same field names/ids/labels/
   action/method/validation as before; see that file's header comment.
   Desktop: form (left) + direct-contact card (right) side by side. Mobile:
   stacked, form first. */
/* Round 12, task 5: small polish pass on top of round 11's redesign --
   slightly more top breathing room under the header, a touch more room
   between contact-card groups, and a prepared (currently unused) error-state
   style. No field names/ids/action/method/validation trigger changed. */
.grcar-contact-page { box-sizing:border-box; max-width:1180px; margin:24px auto 0; padding:0 24px; }
/* Round 13, task B1: the right-hand "Direkt erreichbar" card previously
   started level with the left column's H1 heading (both were just the two
   columns of an ordinary 2-column grid). The user wanted it to instead
   start level with the actual input-field block. Fix: a 2-row grid.
   .grcar-contact-form-panel (the <section> wrapping the heading block and
   the <form>) is made `display:contents` so its two children -- the new
   .grcar-contact-heading wrapper and the <form> itself -- become direct
   grid items instead of one combined box; .grcar-contact-heading is pinned
   to row 1 of column 1 only, the form to row 2 of column 1, and the aside
   to row 2 of column 2. Row 1's height is then driven purely by the
   heading block's own content height (column 2 has nothing in row 1), so
   the aside's top edge lands exactly where the form -- i.e. the first
   input field -- begins. No fixed/negative margins; this falls out of
   normal CSS grid row auto-sizing and holds at any column width. At
   <=820px the grid collapses to 1 column (existing rule below) and every
   item is re-pinned to column 1 in reading order (heading, form, card) for
   a clean stack -- see the media query. */
.grcar-contact-grid { display:grid; grid-template-columns:1.2fr 1fr; grid-template-rows:auto auto; column-gap:36px; row-gap:0; align-items:start; }
.grcar-contact-form-panel { display:contents; }
.grcar-contact-heading { grid-column:1; grid-row:1; }
.grcar-contact-form { grid-column:1; grid-row:2; }
.grcar-contact-direct { grid-column:2; grid-row:2; }
/* Round 14, task 2: the "Name" label (see contact.html) now lives at the end
   of .grcar-contact-heading -- same row-1 column as the heading -- so row 1's
   auto height ends exactly at the Name input's top edge and row 2 (the rest
   of the form + this card) starts flush with it. Styling is identical to the
   ".grcar-form-field label" rule it replaces; margin-bottom reproduces the
   6px .grcar-form-field flex-gap that used to separate label from input. */
.grcar-contact-name-label { display:block; margin:0 0 6px; color:var(--gr-ink); font-size:13px; font-weight:700; letter-spacing:.01em; }
.grcar-contact-form-panel h1 { margin:0 0 8px; color:var(--gr-navy); font-weight:800; font-size:clamp(24px, 2.6vw, 30px); line-height:1.15; letter-spacing:-.01em; }
.grcar-contact-intro { margin:0 0 20px; color:#56657a; font-size:15px; line-height:1.6; }
.grcar-contact-success {
	margin:0 0 18px;
	padding:12px 16px;
	border:1px solid #b9e4c9;
	border-radius:10px;
	background:#eaf8ef;
	color:#1f7a43;
	font-size:14px;
	font-weight:700;
}
.grcar-contact-form { display:flex; flex-direction:column; gap:14px; }
.grcar-form-field { display:flex; flex-direction:column; gap:6px; }
.grcar-form-field label { color:var(--gr-ink); font-size:13px; font-weight:700; letter-spacing:.01em; }
.grcar-contact-form input.textbox,
.grcar-contact-form textarea.textarea {
	box-sizing:border-box;
	width:100%;
	min-height:42px;
	padding:0 14px;
	border:1px solid var(--gr-line);
	border-radius:9px;
	background:#fff;
	color:var(--gr-ink);
	font-size:14px;
	font-family:inherit;
}
.grcar-contact-form textarea.textarea { min-height:110px; padding:10px 14px; resize:vertical; }
.grcar-contact-form input.textbox:focus,
.grcar-contact-form textarea.textarea:focus { outline:2px solid var(--gr-blue); outline-offset:1px; border-color:var(--gr-blue); }
/* Prepared error-state styling (task 5: "clear error-message styling").
   Nothing in the current PHP ever adds .has-error/.grcar-field-error -- this
   form has no server-side validation-failure branch at all (confirmed:
   sendmail.php only ever redirects to ?mailsend=1 on success; there is no
   failure path that re-renders the form with per-field errors). Defining the
   classes now means a future round can wire up real validation and have it
   look right immediately, without this being a functioning feature today --
   flagged honestly in the report, same pattern as round 11's inactive email
   template. */
.grcar-form-field.has-error input.textbox,
.grcar-form-field.has-error textarea.textarea { border-color:#c0392b; background:#fdf2f1; }
.grcar-field-error { margin:2px 0 0; color:#c0392b; font-size:12.5px; font-weight:700; }
.grcar-contact-submit {
	align-self:flex-start;
	min-width:160px;
	min-height:44px;
	margin-top:4px;
	padding:0 28px;
	border:0;
	border-radius:9px;
	background:var(--gr-blue);
	color:#fff;
	font-size:15px;
	font-weight:700;
	letter-spacing:.02em;
	cursor:pointer;
	box-shadow:0 8px 18px rgba(30,86,199,.22);
}
.grcar-contact-submit:hover,
.grcar-contact-submit:focus-visible { background:#184fb8; }
.grcar-contact-direct {
	box-sizing:border-box;
	padding:28px 30px;
	border:1px solid var(--gr-line);
	border-radius:14px;
	background:#f7f9fd;
}
.grcar-contact-direct h2 { margin:0 0 10px; color:var(--gr-navy); font-weight:800; font-size:clamp(19px, 2vw, 22px); }
.grcar-contact-direct-intro { margin:0 0 22px; color:#56657a; font-size:14px; line-height:1.6; }
.grcar-contact-item { display:flex; align-items:flex-start; gap:14px; margin-bottom:22px; }
.grcar-contact-item:last-child { margin-bottom:0; }
.grcar-contact-icon {
	display:flex;
	flex:0 0 38px;
	align-items:center;
	justify-content:center;
	width:38px;
	height:38px;
	border-radius:10px;
	background:#e7eefb;
	color:var(--gr-blue);
	font-size:16px;
}
.grcar-contact-item a { color:var(--gr-ink); font-size:15px; font-weight:700; text-decoration:none; }
.grcar-contact-item a:hover,
.grcar-contact-item a:focus-visible { color:var(--gr-blue); text-decoration:underline; }
.grcar-contact-item small { display:block; margin-top:2px; color:#56657a; font-size:12.5px; font-weight:400; }
@media (max-width:820px) {
	/* Single column: re-pin every item into column 1 in reading order
	   (heading, form, direct-contact card) instead of the desktop's
	   2-column/2-row placement, which would otherwise overlap column 2
	   onto a grid that no longer has one. row-gap is 0 here (not the
	   previous 24px) because the Name label (round 14) now lives inside
	   .grcar-contact-heading, directly before the form -- a 24px row-gap
	   between them would visibly separate the label from its own input.
	   The same 24px breathing room is reproduced explicitly as margin-top
	   on the form and the card instead, so the stacked mobile rhythm is
	   unchanged from before. */
	.grcar-contact-grid { grid-template-columns:1fr; grid-template-rows:auto auto auto; row-gap:0; }
	.grcar-contact-heading { grid-column:1; grid-row:1; }
	.grcar-contact-form { grid-column:1; grid-row:2; margin-top:24px; }
	.grcar-contact-direct { grid-column:1; grid-row:3; margin-top:24px; }
}
@media (max-width:600px) {
	.grcar-contact-page { padding:0 16px; margin-top:4px; }
	.grcar-contact-direct { padding:22px 20px; }
}

/* ---- Model selection / price calculation screen (SCREEN=calculate) ----
   Presentation-only restyle: no PHP logic, field names, form actions or
   hidden inputs were changed; only class attributes were added to the
   existing table markup in calculate.html, matching the card language
   already used on the fleet (.grcar-car-card) and booking (.grcar-booking-card)
   screens. */
.grcar-calc { padding:22px 24px 40px; box-sizing:border-box; }
.grcar-calc-steps input { border-radius:50%; }
.grcar-calc-newbooking { display:inline-block; margin:6px 0 14px; color:var(--gr-blue); font-weight:600; text-decoration:none; }
.grcar-calc-newbooking:hover { text-decoration:underline; }

/* Round 24: compact reservation overview replacing the old wide-spaced
   two-column table (Mietanfang/Mietende far apart, long location names
   truncated at narrow widths). Design approved by the user: dezente
   heading + "change dates" action on one row, two equal-width info cards
   below it, categories starting right after. Reuses the existing palette
   (--gr-navy/--gr-blue/--gr-soft/--gr-line) and icon language already
   established by .grcar-progress-icon -- no new design system. */
.grcar-reservation { width:100%; max-width:720px; margin:0 auto 10px; }
.grcar-reservation-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:8px; }
.grcar-reservation-title { font-size:13px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--gr-muted); }
.grcar-reservation-change { color:var(--gr-blue); font-weight:600; font-size:13.5px; text-decoration:none; white-space:nowrap; }
.grcar-reservation-change:hover,
.grcar-reservation-change:focus-visible { text-decoration:underline; }
.grcar-reservation-cards { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.grcar-reservation-card { display:flex; align-items:flex-start; gap:10px; background:var(--gr-soft); border:1px solid var(--gr-line); border-radius:12px; padding:12px 14px; min-width:0; }
.grcar-reservation-icon { display:flex; align-items:center; justify-content:center; width:30px; height:30px; flex:none; border-radius:50%; background:var(--gr-navy); color:#fff; }
.grcar-reservation-icon svg { width:16px; height:16px; }
.grcar-reservation-info { min-width:0; display:flex; flex-direction:column; gap:1px; }
.grcar-reservation-label { font-size:11px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--gr-muted); }
.grcar-reservation-date { font-size:14px; color:var(--gr-ink); overflow-wrap:break-word; }
.grcar-reservation-time { font-weight:700; color:var(--gr-navy); }
.grcar-reservation-place { font-size:13px; color:var(--gr-muted); overflow-wrap:break-word; }
@media (max-width:820px) {
	.grcar-reservation-card { padding:10px 12px; }
	.grcar-reservation-date { font-size:13px; }
}
@media (max-width:600px) {
	.grcar-reservation-head { flex-wrap:wrap; }
	.grcar-reservation-cards { grid-template-columns:1fr; }
}

/* Round 16: single-column stack -- full-width compact category table on
   top, compact price panel directly below it (no side-by-side columns,
   no large vehicle photo galleries in this booking view).
   Round 17: moderate density pass -- tighter paddings/margins between
   blocks, breakdown/extras/total/continue visually grouped closer
   together, without shrinking touch targets or hiding any information. */
.grcar-calc-layout { width:100%; max-width:720px; margin:0 auto; }
.grcar-calc-categories { width:100%; }
.grcar-calc-price { width:100%; margin-top:16px; }

.grcar-calc-categ-table {
	width:100% !important;
	border-collapse:collapse;
	border:1px solid var(--gr-line);
	border-radius:14px;
	overflow:hidden;
	background:var(--gr-surface);
}
.grcar-calc-categ-row td { padding:6px 10px !important; border-bottom:1px solid var(--gr-line); vertical-align:middle !important; }
.grcar-calc-categ-row:last-child td { border-bottom:none; }
.grcar-calc-categ-row { background:var(--gr-surface); transition:background .15s ease; }
.grcar-calc-categ-row:hover { background:var(--gr-soft); }
.grcar-calc-categ-row-selected { background:var(--gr-soft) !important; box-shadow:inset 3px 0 0 var(--gr-blue); }
.grcar-calc-categ-img { width:64px; }
.grcar-calc-categ-img img { display:block; width:52px; height:38px; object-fit:contain; border-radius:6px; background:var(--gr-soft); }
.grcar-calc-categ-code { width:34px; color:var(--gr-navy); font-size:13px; }
.grcar-calc-categ-info { font-size:13px; line-height:1.3; color:var(--gr-ink); }
.grcar-calc-categ-info b { color:var(--gr-navy); }
.grcar-calc-categ-price { width:64px; white-space:nowrap; }
.grcar-calc-categ-price .BigTitle { color:var(--gr-navy); font-size:15px; }
.grcar-calc-categ-select { width:40px; }
.grcar-calc-categ-select input[type=radio] { width:20px; height:20px; cursor:pointer; }
.grcar-calc-note { margin:10px 2px 0; font-size:12px; color:var(--gr-muted); }

.grcar-calc-price-table { width:100% !important; }
.grcar-calc-card {
	width:100% !important;
	margin-bottom:10px;
	border:1px solid var(--gr-line) !important;
	border-radius:14px !important;
	background:var(--gr-surface) !important;
	box-shadow:0 6px 18px rgba(16,35,79,.06) !important;
}
.grcar-calc-card td,.grcar-calc-card tD { padding:8px 14px !important; }
.grcar-calc-vehicle-card { padding:2px 0 !important; }
.grcar-calc-vehicle-card tD { padding:10px 14px 8px !important; }
.grcar-calc-specs img { height:16px; vertical-align:middle; }
.grcar-calc-specs td { padding:4px 4px !important; font-size:12px; color:var(--gr-muted); }
/* Breakdown + extras visually grouped: no gap between them, shared
   rounded corners only on the outer edges of the pair. */
.grcar-calc-breakdown-card { margin-bottom:0 !important; border-bottom:none !important; border-radius:14px 14px 0 0 !important; }
.grcar-calc-extras-card { border-radius:0 0 14px 14px !important; }
.grcar-calc-extras-card tD:first-child { padding-top:10px !important; }
/* Total + continue button merged into one visually prominent block. */
.grcar-calc-total-card { background:var(--gr-soft) !important; margin-bottom:0 !important; border-radius:14px 14px 0 0 !important; border-bottom:none !important; }
.grcar-calc-total-card tD { padding:12px 16px !important; font-size:17px !important; }
.grcar-calc-continue-card { background:var(--gr-soft) !important; border-top:1px solid var(--gr-line) !important; border-radius:0 0 14px 14px !important; box-shadow:0 6px 18px rgba(16,35,79,.06) !important; }
.grcar-calc-continue-card tD { padding:14px !important; }
.grcar-calc-continue-card .sub_button {
	display:inline-block;
	min-width:200px;
	padding:14px 32px;
	border-radius:999px;
	background:var(--gr-blue);
	color:#fff;
	font-size:16px;
	font-weight:700;
	border:none;
	cursor:pointer;
	box-shadow:0 8px 20px rgba(30,86,199,.28);
}
.grcar-calc-continue-card .sub_button:hover { background:var(--gr-navy); }
.grcar-calc-sticky-total-spacer { display:none; }

/* Round 17, task 6: on desktop, keep the real total+continue block (the
   same DOM elements, same total_price/dis_total_price/sub_button inputs
   and the same single <form> -- no clone, no second calculation, no
   second form) visible while scrolling the category table above it.
   `position:sticky` was tried first, but in this single-column layout
   (task B explicitly forbids a 2-column split) the block's own
   containing row is exactly as tall as the block itself, so there is no
   taller ancestor for it to "stick" within -- sticky had no visible
   effect. `position:fixed` pins the real element to the viewport for the
   whole scroll range instead, which is what "visible while scrolling"
   actually needs here. Desktop-only: on narrower widths a fixed bar
   risks covering content or the mobile keyboard, which the task
   explicitly warns against, so mobile keeps the normal in-flow block. A
   placeholder of the same height is inserted where the block used to sit
   in the flow, so removing it from flow doesn't make the page jump. */
@media (min-width:821px) {
	.grcar-calc-sticky-total {
		position:fixed;
		left:50%;
		bottom:16px;
		transform:translateX(-50%);
		width:min(720px, calc(100% - 48px));
		z-index:50;
		box-shadow:0 14px 32px rgba(16,35,79,.18);
		border-radius:14px;
	}
	.grcar-calc-sticky-total-spacer { display:block; height:118px; }
}

@media (max-width:600px) {
	.grcar-calc { padding:16px 14px 32px; }
	.grcar-calc-categ-img { width:46px; }
	.grcar-calc-categ-img img { width:38px; height:28px; }
	.grcar-calc-categ-code { display:none; }
	.grcar-calc-categ-info { font-size:12px; }
	.grcar-calc-categ-price { width:52px; }
	.grcar-calc-categ-price .BigTitle { font-size:13px; }
}

/* ---- Round 17, task C: booking-step progress indicator ----
   Replaces the three bare "1 2 3" number boxes (vitrine.html/
   calculate.html/add_order.html) with a compact icon+label indicator.
   Purely informational, same as the original (no click handlers, no
   navigation, no change to booking order). One shared component class
   reused on all three screens; each screen hardcodes which of its three
   <li> gets is-done/is-active/is-upcoming, matching that screen's real
   position in the funnel. */
.grcar-progress { display:flex; align-items:center; list-style:none; margin:0; padding:0; }
.grcar-progress-step { display:flex; align-items:center; gap:6px; white-space:nowrap; }
.grcar-progress-icon { display:flex; align-items:center; justify-content:center; width:22px; height:22px; flex:none; border-radius:50%; background:var(--gr-soft); color:var(--gr-muted); }
.grcar-progress-icon svg { width:13px; height:13px; }
.grcar-progress-label { font-size:12px; font-weight:600; color:var(--gr-muted); }
.grcar-progress-step.is-active .grcar-progress-icon { background:var(--gr-blue); color:#fff; }
.grcar-progress-step.is-active .grcar-progress-label { color:var(--gr-navy); }
.grcar-progress-step.is-done .grcar-progress-icon { background:var(--gr-navy); color:#fff; }
.grcar-progress-step.is-done .grcar-progress-label { color:var(--gr-navy); }
.grcar-progress-arrow { margin:0 6px; color:var(--gr-line); font-size:13px; flex:none; }
.grcar-progress-arrow svg { width:12px; height:12px; display:block; }
.grcar-progress-step.is-done + .grcar-progress-arrow { color:var(--gr-navy); opacity:.5; }

/* Full version (calculate.html / add_order.html, full-width pages). Lives
   in its own full-width row below the date-summary table (not squeezed
   into that table's 3rd column, which is how an earlier pass caused a
   real narrow-viewport overflow: a table cell with no fixed width,
   holding nowrap flex content, forced the whole 95%-wide table wider than
   its container). A plain block-level row can always wrap/shrink to its
   container, so this is overflow-safe at any width without needing a
   width media query. */
/* Round 34: centered under the two reservation cards above it (both
   share the same 1232px-wide row and the same page center, so centering
   the progress pill's own content here lines its center up with the
   reservation cards' center without needing to narrow this row to their
   720px) with a real 28px gap before the page content below -- was
   flex-end (right-aligned, from an earlier pass before the reservation
   cards existed) with only a 2px gap, on both calculate.html and
   add_order.html alike (same shared CSS, so this single rule fixes both
   screens at once and is what keeps them from drifting apart again). */
.grcar-calc-steps-row { width:100%; margin:4px 0 28px; }
.grcar-calc-steps.grcar-progress { flex-wrap:wrap; row-gap:4px; justify-content:center; }
@media (max-width:600px) {
	.grcar-calc-steps.grcar-progress { justify-content:center; }
}

/* Compact variant embedded in the frozen homepage booking card
   (vitrine.html) -- own row under the "Calculate Rental Cost" label,
   smaller type so it never forces the 480px card wider. */
.grcar-vitrine-progress-row td { padding-top:4px !important; padding-bottom:2px !important; border-top:1px solid var(--gr-line); }
.grcar-vitrine-progress-row { display:none !important; height:0 !important; visibility:hidden !important; }
.grcar-vitrine-progress { justify-content:flex-start; padding-top:6px; }
.grcar-vitrine-progress .grcar-progress-icon { width:18px; height:18px; }
.grcar-vitrine-progress .grcar-progress-icon svg { width:11px; height:11px; }
.grcar-vitrine-progress .grcar-progress-label { font-size:11px; }
.grcar-vitrine-progress .grcar-progress-arrow { margin:0 4px; }

@media (max-width:480px) {
	.grcar-progress-label { display:none; }
	.grcar-progress-arrow { margin:0 4px; }
}

/* ---- Round 18: customer-details checkout page (SCREEN=add_order) ----
   Presentation-only: every form field name/id, the `ufrm` form itself,
   `vufrm()`'s required-field check, the ob_start()/ob_get_contents()
   booking-summary capture, and all hidden inputs (SCREEN, ACTION,
   OutPut, CategName, SelExtra_[], total_price, ...) are byte-identical
   to before -- only the surrounding HTML/CSS changed. Reuses the same
   card language (.grcar-calc-card family) as calculate.html so the
   whole booking flow looks like one continuous product. */
.grcar-checkout { padding:28px 24px 56px; box-sizing:border-box; }
.grcar-checkout-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:32px; align-items:start; max-width:1080px; margin:0 auto; }
.grcar-checkout-summary { position:sticky; top:24px; }
.grcar-checkout-summary-table { width:100% !important; }
.grcar-checkout-summary .grcar-calc-card { margin-bottom:10px; }
.grcar-checkout-included { margin:14px 2px 0; font-size:12.5px; line-height:1.6; color:var(--gr-muted); }
.grcar-checkout-included b { color:var(--gr-navy); }

.grcar-checkout-form {
	padding:28px 30px;
	border:1px solid var(--gr-line);
	border-radius:16px;
	background:var(--gr-surface);
	box-shadow:0 8px 24px rgba(16,35,79,.06);
}
.grcar-checkout-group { margin-bottom:26px; }
.grcar-checkout-group:last-of-type { margin-bottom:0; }
.grcar-checkout-group h2 {
	margin:0 0 16px;
	padding-bottom:10px;
	border-bottom:1px solid var(--gr-line);
	color:var(--gr-navy);
	font-size:15px;
	font-weight:800;
	letter-spacing:.03em;
	text-transform:uppercase;
}
.grcar-checkout-field { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.grcar-checkout-field:last-child { margin-bottom:0; }
.grcar-checkout-field-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.grcar-phone-field-row { grid-template-columns:1fr; gap:0; }
.grcar-checkout-field-row .grcar-checkout-field { margin-bottom:0; }
.grcar-checkout-field label { color:var(--gr-ink); font-size:13px; font-weight:700; letter-spacing:.01em; }
.grcar-checkout-req { color:#c0392b; font-weight:700; }
.grcar-checkout-field input[type=textbox],
.grcar-checkout-field input[type=text],
.grcar-checkout-field input[type=tel],
.grcar-checkout-field select,
.grcar-checkout-field textarea {
	box-sizing:border-box;
	width:100%;
	min-height:46px;
	padding:0 14px;
	border:1px solid var(--gr-line);
	border-radius:9px;
	background:#fff;
	color:var(--gr-ink);
	font-size:14.5px;
	font-family:inherit;
}
.grcar-checkout-field textarea { min-height:96px; padding:12px 14px; resize:vertical; }
.grcar-phone-input { display:grid; grid-template-columns:94px minmax(0,1fr); gap:8px; }
.grcar-phone-input select,
.grcar-phone-input input { min-width:0; }
.grcar-checkout-field input:focus,
.grcar-checkout-field select:focus,
.grcar-checkout-field textarea:focus { outline:2px solid var(--gr-blue); outline-offset:1px; border-color:var(--gr-blue); }
.grcar-checkout-hint { margin:6px 2px 0; color:var(--gr-muted); font-size:12.5px; line-height:1.55; }
.grcar-checkout-consent {
	display:flex;
	align-items:flex-start;
	gap:10px;
	margin:22px 0 0;
	padding:16px;
	border:1px solid var(--gr-line);
	border-radius:11px;
	background:var(--gr-soft);
	font-size:13.5px;
	line-height:1.5;
	color:var(--gr-ink);
	cursor:pointer;
}
.grcar-checkout-consent input { margin-top:3px; width:18px; height:18px; flex:none; cursor:pointer; }
.grcar-checkout-terms-link { color:var(--gr-blue); font-weight:600; text-decoration:underline; }
.grcar-checkout-terms-link:hover,
.grcar-checkout-terms-link:focus-visible { text-decoration:none; }
.grcar-checkout-submit { margin-top:22px; display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.grcar-checkout-submit .sub_button {
	display:inline-block;
	min-width:220px;
	min-height:48px;
	padding:14px 34px;
	border:none;
	border-radius:999px;
	background:var(--gr-blue);
	color:#fff;
	font-size:16px;
	font-weight:700;
	cursor:pointer;
	box-shadow:0 8px 20px rgba(30,86,199,.28);
}
.grcar-checkout-submit .sub_button:hover { background:var(--gr-navy); }
.grcar-checkout-followup { margin:0; color:var(--gr-muted); font-size:12.5px; }

@media (max-width:900px) {
	.grcar-checkout-grid { grid-template-columns:1fr; max-width:640px; }
	.grcar-checkout-summary { position:static; order:1; }
	.grcar-checkout-form { order:2; padding:22px 20px; }
}
@media (max-width:560px) {
	.grcar-checkout { padding:18px 14px 40px; }
	.grcar-checkout-field-row { grid-template-columns:1fr; gap:0; }
	.grcar-checkout-form { padding:18px 16px; }
	.grcar-phone-input { grid-template-columns:94px minmax(0,1fr); }
}
/* Reservation success page */
.grcar-success-page{max-width:760px;margin:28px auto 56px;padding:46px 56px;text-align:center;background:#fff;border:1px solid #e2e8f2;border-radius:24px;box-shadow:0 18px 50px rgba(16,35,79,.10);color:#142752}
.grcar-success-icon{display:grid;place-items:center;width:72px;height:72px;margin:0 auto 18px;border-radius:50%;background:#e8f7ef;color:#16834b;font-size:42px;font-weight:700;line-height:1}
.grcar-success-eyebrow{margin:0;color:#16834b;font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.grcar-success-page h1{margin:10px 0 10px;color:#10234f;font-size:32px;line-height:1.15}
.grcar-success-lead{max-width:560px;margin:0 auto 24px;color:#536681;font-size:16px;line-height:1.6}
.grcar-success-next{display:flex;gap:14px;align-items:flex-start;margin:0 auto 24px;padding:16px 18px;text-align:left;background:#f5f8fc;border-left:4px solid #1e56c7;border-radius:10px}
.grcar-success-next strong{white-space:nowrap;color:#10234f;font-size:14px}.grcar-success-next span{color:#536681;font-size:14px;line-height:1.5}
.grcar-success-card{padding:20px 22px;text-align:left;border:1px solid #dce5f2;border-radius:16px;background:#fff}
.grcar-success-card-head{display:flex;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:1px solid #e5ebf4;color:#10234f;font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.grcar-success-status{color:#16834b;font-size:11px;letter-spacing:0;text-transform:none}.grcar-success-route{display:flex;align-items:center;gap:18px;padding:22px 0 10px}.grcar-success-date{display:flex;flex:1;flex-direction:column;gap:4px}.grcar-success-date small{color:#687994;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em}.grcar-success-date strong{color:#10234f;font-size:18px}.grcar-success-date span{color:#536681;font-size:13px}.grcar-success-line{flex:0 0 50px;height:2px;background:#cbd8ea}.grcar-success-line span{display:block;width:8px;height:8px;margin:-3px auto 0;border-radius:50%;background:#1e56c7}.grcar-success-places{display:flex;justify-content:space-between;gap:18px;color:#687994;font-size:12px}.grcar-success-places span{flex:1}.grcar-success-places span:last-child{text-align:right}
.grcar-success-email{display:flex;align-items:center;gap:12px;margin:20px 0;padding:15px 18px;text-align:left;background:#edf4ff;border-radius:10px}.grcar-success-email-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#dbe9ff;color:#1e56c7;font-weight:800}.grcar-success-email strong,.grcar-success-email span{display:block}.grcar-success-email strong{color:#10234f;font-size:13px}.grcar-success-email span{margin-top:3px;color:#536681;font-size:13px;line-height:1.4}.grcar-success-note{margin:0 auto 22px;color:#7b8ba4;font-size:12px;line-height:1.5}.grcar-success-button{display:inline-block;padding:13px 24px;border-radius:8px;background:#1e56c7;color:#fff;font-size:14px;font-weight:800;text-decoration:none;box-shadow:0 6px 16px rgba(30,86,199,.22)}.grcar-success-button:hover{background:#17479f;color:#fff}
@media (max-width:680px){.grcar-success-page{margin:16px 12px 36px;padding:32px 20px;border-radius:18px}.grcar-success-page h1{font-size:26px}.grcar-success-next{display:block}.grcar-success-next strong,.grcar-success-next span{display:block}.grcar-success-next span{margin-top:6px}.grcar-success-card{padding:16px}.grcar-success-route{gap:8px}.grcar-success-line{flex-basis:20px}.grcar-success-date strong{font-size:15px}.grcar-success-places{font-size:11px}}