/* ==========================================================================
   ACTION NETWORK DONATION FORM: styling for /strike-fund/ only.
   Two blocks:

   1. PI's CSS, VERBATIM: the full "Start/End ActionNetwork Customisation"
      text Paweł sent in the Refuse to Move Signal group (Mon 2026-09-28
      11:15 AM, "some CSS that we have used to style these forms"), complete
      copy pasted by Ciaran to HQ 2026-10-04. Quirks kept on purpose
      (the `//display:none` line, the selector missing a dot before
      `donate_amount-selected`). Do not edit in place; if PI sends a new
      version, replace block 1 whole.
   2. RtM adjustments: site-side overrides, each with its reason. They sit
      after block 1 so they win on equal specificity.
   ========================================================================== */

/* ---- 1. PI's CSS (verbatim) ---- */
/* Start ActionNetwork Customisation */
/* Action Network - form - Minimal */

#donation_recipient_wrap, #donate_login, #can_sidebar  {display:none !important;}

#can_embed_form #logo_wrap, #can_embed_form #action_info, #can_embed_form h2, #can_embed_form h4  {
    display: none !important;
}

#can_embed_form #d_sharing.affirmative_optin_d_sharing {
    text-align: left;
    font-family: monospace;
    color: black !important;
}

#can_embed_form #d_sharing.affirmative_optin_d_sharing .check_radio_label, #can_embed_form #d_sharing.affirmative_optin_d_sharing .affirmative_note {display: none;}

/* Action Network - forcing to one column */
#can_main_col {
    width: 100% !important;
    float: none;
}

#can_embed_form.can_float #form_col1, #can_embed_form.can_float #form_col2, #can_embed_form #can_sidebar{
float: none !important;
width: 100% !important;
}

/* Action Network - form - remove lines */
#can_embed_form #d_sharing {
     border-top: none !important;
}

#can_embed_form #donate_disclaimer {
     display: none;
}

/* registered user box */

#can_embed_form #action_welcome_message #action_welcome_message_inner {
    background-color: black;
    padding: 20px;
    text-align: center;
    border: none !important;
    border-radius: 10px !important;
    font-family: 'Helvetica', sans-serif;
}

#can_embed_form #donation_welcome {
    background-color: #ebe7d4 !important;
    padding: 19px;
    border: none !important;
    border-radius: 15px !important;
    margin: 20px 0 40px !important;
}

#can_embed_form .donate_recurring {
      padding: 20px 20px 10px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    background-color: #ebe7d4 !important;
    border-radius: 10px !important;
    color: red !important;
}

/* edit the donate buttons */

#can_embed_form .check_radio_field.donate_amount_wrap label {
    background-color: black !important;
    color: #fff !important;
    font-size: 2em !important;
    font-weight: bold !important;
    border-radius: 25px !important;
   font-family: 'Helvetica', sans-serif !important;
}

/* The little text above each form field */

#can_embed_form .floatlabel-wrapper .floatlabel-label-active {
    color: black !important;
    font-family: 'Helvetica', sans-serif !important;
}


#can_embed_form .floatlabel-wrapper .floatlabel-label-active::after {
font-size: 0px;
}

/* custom colour for hover and select (red #d72b1f replaced with the site yellow #fcea50 on Paweł's word, 5 Oct 2026) */
#can_embed_form label.donate_amount:hover, #can_embed_form .donate_amount.js-donate_amount.donate_amount-selected {
    background-color: #fcea50 !important;
    color: #ebe7d4 !important;
    border: 3px solid black;
}

/* Edit the drop-down menu fields */

#can_embed_form select.can_select, #can_embed_form span.can_select {
   border-radius: 5px !important;
   border: none !important;
   font-family: 'Helvetica', sans-serif !important;
   color: #000000;
   font-weight: bold;
}

/* Action Network - form - custom submit button */
#can_embed_form input[type=submit], #can_embed_form .button {
    font-size: 1em !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    padding: 12px 10px !important;
    color: #ebe7d4 !important;
    background-color: black !important;
    border-radius: 50px !important;
   font-family: 'Helvetica', sans-serif !important;
}

/* custom submit button hover */
#can_embed_form input[type=submit]:hover, #can_embed_form .button:hover {
    color: #ebe7d4 !important;
    background-color: #fcea50 !important;
}

#can_embed_form #d_sharing label {
    line-height: 16px !important;
}

#can_embed_form .additional_text {
    margin-top: 25px;
    font-size: 10px;
    line-height: 19px;
    text-align: center;
    font-family: 'Helvetica', sans-serif !important;
    color: black;
   text-transform: uppercase;
}

/* reduce space between form fields */
#can_embed_form form li.core_field {
    margin: 0 0 0px!important;
}

#can_embed_form form li.core_field:nth-child(5) {
       margin: 0 0 15px!important;
}

/* remove padding and border  */
.can_embed #can_embed_form   {
    padding: 0px!important;
    border: none!important;
}


/* Action Network - Form submitted - change awful green*/
#can_embed_form #can_thank_you {
background-color: transparent !important;
color: black !important;
padding: 12px 0px 0px !important;
margin: 0 0 0px !important;
text-align: left !important;
}


/* Action Network - Form submitted - change title*/
#can_embed_form #can_thank_you h1 {
font-size: 46px!important;
color: red !important;
}

/* Action Network - Form submitted - change "share this" text color*/
#can_embed_form h4 {
color: #ebe7d4;
}

/* Action Network - Form submitted - change social share text color*/
#can_embed_form.can_thank_you_wrap a {
color: #ebe7d4 !important;
}

/* Action Network - Form submitted - remove help us speel */
#can_embed_form #can_thank_you h4 {
display:none;
}

/* Action Network - Form submitted - increase thank you copy size */
#can_embed_form #can_thank_you p {
font-size: 20px !important;
}

/* Action Network - Form submitted - remove share link */
#can_embed_form #can_thank_you #action_info {
display:none !important;
}

#can_embed_form input[type=text], #can_embed_form input[type=password], #can_embed_form input[type=url], #can_embed_form input[type=email], #can_embed_form input[type=tel], #can_embed_form input[type=number] {
    border: none !important;
    font-weight: bold !important;
    border-radius: 5px !important;
    color: #000000 !important;
   font-family: 'Helvetica', sans-serif !important;
}

#can_embed_form .can_thank_you-block input[type=text], #can_embed_form .can_thank_you-block label {
//display:none !important;
border: none !important;
border-radius: 5px !important;
}

/* Action Network - Form submitted - remove email */
#can_embed_form .can_thank_you-block:nth-child(2) {
display:none
}

/* Action Network - Form submitted - remove user embed*/
#can_embed_form .can_thank_you-block:nth-child(3) {
display:none
}

.can_embed-html html {
    background-color: transparent !important;
}

/* OPT-IN TEXT COLOR */

span.controls.check_radio_field {
color: #ebe7d4 !important;
}

/* STATUS BAR FIX - HIDE */

#can_embed_form.can_768 #can_sidebar {
display: none !important;
padding: 0 !important;
border: none !important;
background-color: transparent !important;
}

div.action_description.clearfix {
display: none !important;}

#can_embed_form .action_status_running_total {
    text-align: left !important;
    color: red !important;
    font-weight: bold !important;
    font-size: 18px !important;
    margin-bottom: 10px !important;
    font-family: 'Helvetica', sans-serif !important;
    letter-spacing: -0.4px !important;
}

#can_embed_form .action_status_tracker .action_status_goal {
    text-align: left !important;
    color: red !important;
    font-size: 12px !important;
    line-height: 21px !important;
    letter-spacing: -0.2px !important;
}

#can_embed_form .action-widget--toggle .action_status_status_bar span.action_status_status_bar-grow {
    height: 16px !important;
    background-color: #fc164b !important;
}

#can_embed_form .action_status_tracker .action_status_status_bar {
    background-color: #ebe7d4 !important;
    height: 16px !important;
    margin-bottom: 10px !important;
}

#can_embed_form .action_status_tracker {
    padding: 0 !important;
    border-bottom: none !important;
}

body.can_embed, body.can_fundraising_widget, html {
    margin: 0!important;
    font-weight: 400;
    background-color: transparent !important;
}

/* Custom amount button fix */

.donate_amount.other_label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.donate_amount_custom.other_input.number.required {
  display: block !important;
  box-sizing: border-box !important;
  margin-bottom: 0 !important;
  border-radius: 25px !important;
  background: none !important;
  color: #ebe7d4 !important;
}

#can_embed_form .check_radio_field label input.other_input {
   background: transparent !important;
}

.donate_amount.js-donate_amount donate_amount-selected {
   background: #ebe7d4 !important;
   color: red !important;
}

/* Error message styling */

li#error_message::before {
    content: '⚠️' !important;
    padding-right: 10px !important;
}

#can_embed_form #error_message, #can_embed_form .email_validation {
    text-align: center;
    background-color: transparent !important;
    padding: 10px 20px;
    margin: 0;
    width: 100%;
    color: #ebe7d4 !important;
    font-weight: bold !important;
    position: relative;
    font-family: 'Helvetica', sans-serif !important;
   text-transform: uppercase !important;
}

/* End ActionNetwork Customisation */

/* ---- 2. RtM adjustments ---- */

/* A1. Make the fields visible. PI's field rules set `border: none` on the
   text inputs and the skinned selects; AN's fields are white, and on this
   site the form sits on the white .bar card, so the fields vanished and
   only their labels showed. Fill them with PI's own cream; borders stay
   off as PI set them. (The "$ Other" amount input keeps PI's transparent
   fill: PI's more specific .other_input rule still wins.) */
#can_embed_form input[type=text], #can_embed_form input[type=email], #can_embed_form input[type=tel], #can_embed_form input[type=number], #can_embed_form span.can_select {
  background-color: #ebe7d4 !important;
}

/* A2. Keep the site's body font out of the frame. AN copies every
   same-origin stylesheet on the page into its iframe, style.css included;
   its body rule sets Inter, whose relative font URLs resolve against
   actionnetwork.org inside the frame and 404 (two console errors per
   load). PI's Helvetica on the frame body means Inter is never requested
   there. Matches only AN's frame body, never this site's own body. */
body.can_fundraising_widget {
  font-family: 'Helvetica', sans-serif;
}

/* A3. Validation messages readable on white. PI sets the error message and
   the email-typo hint to cream on a transparent ground; on the white card
   that is cream on white, so a donor with a missing field would see
   nothing. PI's black instead. */
#can_embed_form #error_message, #can_embed_form .email_validation {
  color: #000 !important;
}

/* A4. No transitions inside the form. AN sizes its iframe once, right after
   this CSS reaches the frame. AN's own rules animate restyles over 0.25s,
   and browsers freeze those animations while the frame is below the fold,
   so the frame was measured with the half-applied styles and came out 17px
   short: the "Edit Subscription Preferences" link at the bottom was cut off.
   With transitions off, PI's styles land at once and the measure is right.
   Only cost: the hover colour change on the buttons is instant, not faded. */
#can_embed_form, #can_embed_form * {
  transition: none !important;
}

/* A5. Opt-in labels readable on white. PI's "OPT-IN TEXT COLOR" rule paints
   them cream (#ebe7d4) for a dark page; on the white card that is 1.24:1,
   close to invisible. The site's ink instead (same reason as A3). */
#can_embed_form span.controls.check_radio_field {
  color: #121212 !important;
}

/* A6. The error count. AN's default paints the <strong> inside the error
   message white, so on the white card "Oops! You have 13 errors." read
   "OOPS! YOU HAVE ERRORS." A3 fixed the message; this fixes the number. */
#can_embed_form #error_message strong, #can_embed_form .email_validation strong {
  color: #000 !important;
}

/* A7. Field hints readable on PI's cream fill. Chrome's default placeholder
   grey (#757575) on cream is 3.7:1; ink at 70 percent is 6.3:1 and still
   reads as a hint, not a value (the site's muted-ink pattern). */
#can_embed_form input::placeholder {
  color: rgba(18, 18, 18, 0.7);
  opacity: 1;
}

/* A8. "$ Other" readable in both states. PI's generic text-input rule (black)
   outranks PI's own cream rule for this input, so typed digits were black on
   the black pill; the hint was grey. White on the black pill, as on the $5 to
   $20 buttons beside it (21:1). On hover and once selected the pill is yellow
   and the text turns ink: see A13. Size is unchanged (question for Pawel). */
#can_embed_form .check_radio_field label input.other_input,
#can_embed_form .check_radio_field label input.other_input[type=text] {
  color: #fff !important;
}
#can_embed_form .check_radio_field label input.other_input::placeholder {
  color: #fff;
  opacity: 1;
}

/* A9. "Not in the US?" was AN's 11px; 14px, the size of the opt-in labels. */
#can_embed_form .international_link {
  font-size: 14px !important;
}

/* A10. A visible focus state. AN marks focus only by a border colour, and
   PI's `border: none` removes the border, so a keyboard user could not see
   where they were. The site's own ring (3px ink). Inside the black "$ Other"
   pill an ink ring would vanish, so the ring goes around the pill instead,
   on the white card. */
#can_embed_form input:focus-visible,
#can_embed_form select:focus-visible,
#can_embed_form .button:focus-visible,
#can_embed_form span.can_select.can_selectFocus {
  outline: 3px solid #121212 !important;
  outline-offset: 2px !important;
}
#can_embed_form .check_radio_field label input.other_input:focus-visible {
  outline: none !important;
}
#can_embed_form .check_radio_field.donate_amount_wrap label.other_label:focus-within {
  outline: 3px solid #121212 !important;
  outline-offset: 2px !important;
}

/* A11. Submit hover readable. The hover fill is now the site yellow (Paweł,
   5 Oct 2026: "the buttons on hover could be white or yellow instead of
   red"); PI's cream text on yellow would be 1.1:1, so the text is ink
   (15.6:1), with an ink edge so the pill keeps its shape on the white card. */
#can_embed_form input[type=submit]:hover, #can_embed_form .button:hover {
  color: #121212 !important;
  box-shadow: inset 0 0 0 3px #121212 !important;
}

/* A12. $5 to $20 reachable by keyboard. AN hides the amount radios with
   `visibility: hidden`, which also takes them out of the Tab order, so a
   keyboard user went from the text straight to "$ Other". Here they stay
   invisible (opacity 0, 1px, clipped) but focusable; Tab lands on the
   amount group and the arrow keys move between $5, $10, $15, $20 and Other,
   and AN's own handler marks the choice (yellow now) as it does for a click. The
   ring (A10's) goes on the pill whose radio has keyboard focus; a mouse
   click shows no ring, as before. */
#can_embed_form .check_radio_field.donate_amount_wrap label input[type=radio] {
  visibility: visible !important;
  opacity: 0 !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  clip-path: inset(50%) !important;
  pointer-events: none !important;
}
#can_embed_form .check_radio_field.donate_amount_wrap label:has(input[type=radio]:focus-visible) {
  outline: 3px solid #121212 !important;
  outline-offset: 2px !important;
}

/* A13. Yellow hover and selected states readable. With the red replaced by
   yellow (Paweł, 5 Oct 2026), PI's cream text on those states would vanish.
   Ink text on the amounts, on "$ Other" and on its hint while the pill is
   yellow. PI's own 3px black border on these states stays. */
#can_embed_form label.donate_amount:hover,
#can_embed_form .donate_amount.js-donate_amount.donate_amount-selected {
  color: #121212 !important;
}
#can_embed_form .check_radio_field label.donate_amount:hover input.other_input,
#can_embed_form .check_radio_field label.donate_amount:hover input.other_input[type=text],
#can_embed_form .check_radio_field label.donate_amount-selected input.other_input,
#can_embed_form .check_radio_field label.donate_amount-selected input.other_input[type=text] {
  color: #121212 !important;
}
#can_embed_form .check_radio_field label.donate_amount:hover input.other_input::placeholder,
#can_embed_form .check_radio_field label.donate_amount-selected input.other_input::placeholder {
  color: #121212;
  opacity: 1;
}

/* A14. Button corners match the page. Paweł (Signal, 5 Oct 2026): "decrease
   the border radius on the buttons to match the border radius of the text
   elements on the page ... These are like 10px and the buttons are 25px".
   The page's boxes use 12px (9px on small screens, style.css --radius-sm);
   the amounts, "$ Other" and the submit button take the same. PI's values
   (25px and 50px) are left in place above and overridden here. */
#can_embed_form label.donate_amount,
#can_embed_form .check_radio_field label.donate_amount,
#can_embed_form .donate_amount_custom.other_input.number.required,
#can_embed_form .check_radio_field label input.other_input,
#can_embed_form input[type=submit],
#can_embed_form .button {
  border-radius: 12px !important;
}
@media (max-width: 560px) {
  #can_embed_form label.donate_amount,
  #can_embed_form .check_radio_field label.donate_amount,
  #can_embed_form .donate_amount_custom.other_input.number.required,
  #can_embed_form .check_radio_field label input.other_input,
  #can_embed_form input[type=submit],
  #can_embed_form .button {
    border-radius: 9px !important;
  }
}

/* A15. After-donation panel: text left, in ink, no line. Paweł (Signal,
   5 Oct 2026), on Ciaran's screenshot of what AN shows after a donation:
   "If we could align the text left, get rid of the line, make the text
   black, and add border radius to the social media buttons that would be
   amazing." In that panel AN centres "Save your payment information" and
   the line under it (its .centertext), and draws a 1px grey rule under
   that heading (AN's .entry-title border-bottom, #b3b3b3): that rule is
   "the line", the only one visible in that state. PI colours the
   thank-you heading red. Here: left, the site's ink (#121212) for both
   headings, the paragraph and the grey "Direct link" label, and the rule
   removed. Selectors are from AN's real thank-you markup, read from the
   form's frame after Ciaran's donation (5 Oct 2026); the donation form
   itself has none of these elements. Button labels stay centred in their
   buttons, as on the form. */
#can_embed_form.can_thank_you_wrap .payment-info__wrap,
#can_embed_form.can_thank_you_wrap .payment-info__wrap .centertext {
  text-align: left !important;
}
#can_embed_form.can_thank_you_wrap #can_thank_you h1,
#can_embed_form.can_thank_you_wrap .payment-info__wrap h3,
#can_embed_form.can_thank_you_wrap .payment-info__wrap p,
#can_embed_form.can_thank_you_wrap .can_thank_you-block label {
  color: #121212 !important;
}
#can_embed_form.can_thank_you_wrap .payment-info__wrap .entry-title {
  border-bottom: none !important;
}

/* A16. Share buttons' corners. Paweł (same message, 5 Oct 2026): "add
   border radius to the social media buttons". The Facebook, X/Twitter and
   Bluesky share buttons in the after-donation panel (AN's .share_button)
   are square; they take the corners A14 gives the form's buttons, 12px
   and 9px on small screens. */
#can_embed_form .can_thank_you-block .share_button {
  border-radius: 12px !important;
}
@media (max-width: 560px) {
  #can_embed_form .can_thank_you-block .share_button {
    border-radius: 9px !important;
  }
}

/* A17. The status bar. Paweł (Signal, 6 Oct 2026, 3:40 AM): "Can we show
   the status bar? I think it might be hidden." It was: PI's sheet hides
   AN's whole sidebar (#can_sidebar, which holds the raised/goal tracker
   and a copy of the page description). The sidebar is shown again, full
   width and placed above the amounts; only the tracker inside it is
   visible, since the page already carries the description. Tracker in
   ink on the paper tone used by the inputs, corners as A14. */
#can_embed_form #can_sidebar,
#can_embed_form.can_768 #can_sidebar {
  display: block !important;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 0 22px !important;
  border: 0 !important;
  background: transparent !important;
}
#can_embed_form #can_sidebar > *:not(.action_status_tracker) {
  display: none !important;
}
#can_embed_form div.clearfix:has(> #can_main_col + #can_sidebar) {
  display: flex !important;
  flex-direction: column !important;
}
#can_embed_form #can_sidebar {
  order: -1 !important;
}
#can_embed_form .action_status_tracker {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}
#can_embed_form .action_status_running_total {
  color: #121212 !important;
  font-family: 'Helvetica', sans-serif !important;
  font-size: 22px !important;
  font-weight: bold !important;
  letter-spacing: -0.4px !important;
  text-align: left !important;
  margin: 0 0 10px !important;
}
#can_embed_form .action_status_tracker .action_status_status_bar {
  background-color: #ebe7d4 !important;
  height: 16px !important;
  margin: 0 0 10px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
#can_embed_form .action-widget--toggle .action_status_status_bar span.action_status_status_bar-grow,
#can_embed_form .action_status_status_bar span.action_status_status_bar-grow {
  height: 16px !important;
  background-color: #121212 !important;
  border-radius: 12px !important;
}
#can_embed_form .action_status_tracker .action_status_goal {
  color: #121212 !important;
  font-family: 'Helvetica', sans-serif !important;
  font-size: 14px !important;
  line-height: 21px !important;
  letter-spacing: -0.2px !important;
  text-align: left !important;
}
@media (max-width: 560px) {
  #can_embed_form .action_status_tracker .action_status_status_bar,
  #can_embed_form .action_status_status_bar span.action_status_status_bar-grow {
    border-radius: 9px !important;
  }
}