/* GOJOB-550: the cookie banner (#consent) and the One Tap consent strip (#gsi-ask) of the site pages drawn by the designer
   (the homepage, landing.css, and the sign-in page, login.css), moved out of landing.css. Both pages define the colours. */

/* Google One Tap: the consent strip asked before One Tap shows (#gsi-ask), a small card bottom right; full width on phones.
   The cookie banner (#consent, GOJOB-523) is the same card, bottom left, and keeps One Tap away while it is open. */
.gsi-ask, .consent { position: fixed; right: 24px; bottom: 24px; z-index: 50; display: flex; flex-direction: column; gap: 12px; width: min(440px, 100% - 32px); padding: 20px; background: var(--cashew-025); border-radius: 12px; box-shadow: inset 0 0 0 1px #f0ece6, 0 12px 32px rgba(58, 53, 32, 0.12); color: var(--cashew-80); font-size: 14px; line-height: 1.45; }
.gsi-ask[hidden], .consent[hidden] { display: none; }
.gsi-ask p:first-child, .consent p:first-child { color: var(--kale); font-weight: 600; font-size: 15px; }
.gsi-ask-text, .consent-text { color: var(--cashew-60); font-size: 13px; }
/* the banner's Privacy policy link hovers like the sign-up card's links (.signup__foot a): lime, underline slides out to the right and back in */
:is(.gsi-ask-text, .consent-text) a { position: relative; display: inline-block; color: var(--spinach); transition: color 300ms ease; }
:is(.gsi-ask-text, .consent-text) a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: left; transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1); }
:is(.gsi-ask-text, .consent-text) a:hover, :is(.gsi-ask-text, .consent-text) a:focus-visible { color: var(--lime); }
:is(.gsi-ask-text, .consent-text) a:hover::after, :is(.gsi-ask-text, .consent-text) a:focus-visible::after { transform: scaleX(0); transform-origin: right; }
.gsi-ask-actions, .consent-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.gsi-ask-actions button, .consent-actions button { flex: 1; min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; font: inherit; font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background-color 300ms ease, color 300ms ease; }
:is(.gsi-ask-actions, .consent-actions) button { min-width: max-content; } /* a button never shrinks below its label: the row wraps instead */
.consent-actions [hidden] { display: none; }
:is(.gsi-ask-actions, .consent-actions) button:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.gsi-ask .btn-primary, .consent .btn-primary { background: var(--carrot); color: var(--kale); }
.gsi-ask .btn-secondary, .consent .btn-secondary, .consent #consent-none { background: transparent; color: var(--spinach); box-shadow: inset 0 0 0 1px var(--spinach); }
/* banner buttons: the circle-fill hover of Log in (origin set in landing.js) */
:is(.gsi-ask-actions, .consent-actions) button { position: relative; isolation: isolate; overflow: hidden; }
:is(.gsi-ask-actions, .consent-actions) button::before { content: ""; position: absolute; z-index: -1; left: var(--x, 50%); top: var(--y, 50%); width: var(--d, 150%); aspect-ratio: 1; border-radius: 50%; background: var(--spinach); transform: translate(-50%, -50%) scale(0); transition: transform 400ms cubic-bezier(.4, 0, .2, 1); }
.gsi-ask .btn-primary::before, .consent .btn-primary::before { background: color-mix(in srgb, var(--carrot) 72%, #fff); }
.consent #consent-none::before { background: var(--spinach); }
:is(.gsi-ask-actions, .consent-actions) button:is(:hover, :focus-visible)::before { transform: translate(-50%, -50%) scale(1); }
.gsi-ask .btn-secondary:is(:hover, :focus-visible), .consent .btn-secondary:is(:hover, :focus-visible), .consent #consent-none:is(:hover, :focus-visible) { color: var(--cashew-100); }
.gsi-ask button:focus-visible, .consent button:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.consent { right: auto; left: 24px; z-index: 60; width: min(440px, 100% - 32px); max-height: calc(100dvh - 48px); overflow-y: auto; }
.gsi-ask p:first-child, .consent p:first-child { font-size: 17px; font-weight: 700; }
.gsi-ask p:first-child strong, .consent p:first-child strong { font-weight: inherit; }
.consent-choose { display: flex; flex-direction: column; gap: 10px; }
.consent-choose[hidden] { display: none; }
.consent-option { display: flex; align-items: flex-start; gap: 10px; color: var(--cashew-60); font-size: 13px; cursor: pointer; }
.consent-option strong { color: var(--kale); font-weight: 600; }
/* checkbox as in the product (ui.css): 16px, 4px radius, light border, kale and a white tick when checked */
.consent-option input { appearance: none; flex-shrink: 0; width: 16px; height: 16px; margin: 2px 0 0; border: 1px solid #d7cfc4; border-radius: 4px; background: transparent center / 100% no-repeat; cursor: pointer; }
.consent-option input:checked { border-color: var(--kale); background-color: var(--kale); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E"); }
.consent-option input:disabled { opacity: .5; cursor: default; }
.consent-option input:focus-visible { outline: 2px solid var(--spinach); outline-offset: 2px; }
body:has(.consent:not([hidden])) .gsi-ask { display: none; }
@media (prefers-reduced-motion: reduce) { :is(.gsi-ask-text, .consent-text) a, :is(.gsi-ask-text, .consent-text) a::after, :is(.gsi-ask-actions, .consent-actions) button, :is(.gsi-ask-actions, .consent-actions) button::before { transition: none; } }
@media (max-width: 760px) { .gsi-ask, .consent { left: 16px; right: 16px; bottom: 16px; width: auto; } .consent { max-height: calc(100dvh - 32px); } }