Fix the Monitary Feedbacks

[tarunnjoshi]

Fix the Monitary Feedbacks
https://github.com/coloredcow-admin/goonj-crm/issues/157

Summary by CodeRabbit

• New Features

  • Updated the donation link text from "Monetary/Donation" to "Monetary Contribution" for improved clarity in both the dropping center and processing center sections.

• UI Enhancements

  • Adjusted CSS styles for the Contribution Page and Thank You Page to improve layout and visibility, including hiding certain labels and refining spacing for a better user experience.
  • Enhanced form layouts with grid displays and consistent styles for labels and input fields.
  • Implemented responsive design adjustments to ensure consistent appearance across different screen sizes.

• Bug Fixes

  • Maintained robust error handling for date and time processing related to the 'collection-camp' target, ensuring continued reliability.
  • Refined the display logic on the Thank You page for clearer user feedback regarding contributions.

[coderabbitai]

Walkthrough

The changes in this pull request focus on updating the rendering logic within the render.php file of the Goonj Blocks plugin. Specifically, the text for donation links has been modified from "Monetary/Donation" to "Monetary Contribution" in two instances. The overall structure of the code remains unchanged, maintaining the existing logic for various target types and preserving error handling for date parsing. No new functions or alterations to public entity declarations were introduced.

Changes

File Path	Change Summary
wp-content/plugins/goonj-blocks/.../render.php	Renamed donation link text from "Monetary/Donation" to "Monetary Contribution" in two locations; preserved existing rendering logic and error handling for date parsing.
wp-content/themes/goonj-crm/assets/styles/contribution.scss	Modified CSS styles for Contribution Page and ThankYou Page, including hiding elements and adjusting layout properties.
wp-content/themes/goonj-crm/style.css	Updated CSS rules for layout and visibility of form elements, including hiding legends and managing grid displays.
wp-content/plugins/civicrm/civicrm/templates/CRM/Contribute/Form/Contribution/ThankYou.tpl	Adjusted conditional rendering logic for amount display, ensuring cleaner output and consistent use of translation tags.

Possibly related PRs

• Added time row for collection camp #350: This PR enhances the rendering logic for the render.php file, specifically for displaying date and time information related to 'collection-camp' and 'dropping-center' targets, which is closely related to the rendering logic changes in the main PR.
• Refactor date and address handling logic for collection camps and dropping centers  #364: This PR refactors the date and address handling logic for collection camps and dropping centers, which aligns with the changes made in the main PR regarding the rendering logic for these targets.
• Integrate donation with Goonj flows #437: This PR introduces a new variable for constructing donation links in the render.php file, which is directly related to the changes made in the main PR regarding the rendering of donation links.
• Add Monetary Contribution Tabs #441: The addition of monetary contribution tabs in this PR relates to the overall functionality of handling monetary contributions, which is a focus of the main PR's changes in rendering donation links.

Suggested labels

status : reviewed

Suggested reviewers

• belwalshubham
• pokhiii

🎉 In the realm of code where changes flow,
Donation links now shine and glow.
From "Monetary/Donation" to a clearer view,
"Monetary Contribution" is what we now do!
With logic intact and errors well caught,
Goonj Blocks improves, just as we thought! 🎉

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between 4f4e7d2 and ad86ce3.

📒 Files selected for processing (1)

• wp-content/plugins/civicrm/civicrm/templates/CRM/Contribute/Form/Contribution/ThankYou.tpl (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• wp-content/plugins/civicrm/civicrm/templates/CRM/Contribute/Form/Contribution/ThankYou.tpl

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (2)

wp-content/plugins/goonj-blocks/build/render.php (2)

174-174: Consider updating the PR title and description

The text changes from "Monetary/Donation" to "Monetary Contribution" look good and improve clarity. However, the PR title "Fix the Monitary Feedbacks" has a typo ("Monitary" should be "Monetary") and suggests a broader scope than just text changes. Consider:

1. Fixing the typo in the PR title
2. Adding a clear PR description explaining the rationale for these changes

Also applies to: 194-194

---

Line range hint 1-240: Consider architectural improvements for better maintainability

While reviewing the text changes, I noticed several areas where the code could be improved:

1. Separation of Concerns:

   • Extract URL building logic into a dedicated service class
   • Move HTML rendering to separate template files
   • Consider using WordPress template hierarchy

2. Reduce Code Duplication:

   • The donation link generation logic is repeated for different center types
   • Extract common patterns into reusable functions

Here's a suggested refactor for the donation link generation:

class DonationLinkBuilder {
    public function buildLink(string $sourceType, int $sourceId): string {
        $sourceField = $this->getSourceCustomField($sourceType);
        return add_query_arg(
            [
                'reset' => 1,
                'action' => 'preview',
                'id' => 1,
                "custom_{$sourceField['id']}" => $sourceId,
            ],
            home_url('/civicrm/contribute/transact/')
        );
    }

    private function getSourceCustomField(string $sourceType): array {
        $fieldName = $sourceType === 'pu' ? 'PU_Source' : 'Source';
        return CustomField::get(FALSE)
            ->addSelect('id')
            ->addWhere('custom_group_id:name', '=', 'Contribution_Details')
            ->addWhere('name', '=', $fieldName)
            ->execute()
            ->single();
    }
}

3. Configuration Management:
   • Move hardcoded strings to translation files or constants
   • Consider using WordPress options API for configurable values

Would you like me to provide more specific examples for any of these improvements?

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between e0d4dce and ae3274a.

📒 Files selected for processing (1)

• wp-content/plugins/goonj-blocks/build/render.php (2 hunks)

[coderabbitai]

Actionable comments posted: 3

🧹 Outside diff range and nitpick comments (5)

wp-content/themes/goonj-crm/assets/styles/contribution.scss (2)

Line range hint 1-200: Improve code organization and reduce specificity

The file has several maintainability concerns:

1. Deep nesting of selectors increases specificity and makes styles harder to override
2. Repetitive font declarations
3. Multiple !important declarations throughout the file

Consider these improvements:

1. Extract common styles into reusable classes:

// Common text styles
.form-text {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 400;
}

// Common form layout
.form-grid {
  display: grid;
  gap: 30px;
  align-items: center;
}

2. Use BEM methodology to reduce selector specificity:

.contribution {
  &__form {
    // styles
  }
  
  &__input {
    // styles
  }
}

3. Consider splitting the file into separate components:

• contribution-form.scss
• contribution-thankyou.scss
• contribution-responsive.scss

---

Line range hint 150-200: Consolidate media queries

The media queries are scattered throughout the file and have overlapping breakpoints. This makes responsive maintenance difficult.

Consider using a mixin-based approach:

@mixin mobile {
  @media (max-width: 767px) {
    @content;
  }
}

@mixin tablet {
  @media (min-width: 768px) and (max-width: 1024px) {
    @content;
  }
}

Then use them like:

.form-element {
  // Base styles
  
  @include mobile {
    // Mobile styles
  }
  
  @include tablet {
    // Tablet styles
  }
}

wp-content/themes/goonj-crm/style.css (3)

Line range hint 1-1000: Consider reorganizing CSS for better maintainability

The CSS file is quite large and could benefit from better organization. Consider:

1. Breaking it down into smaller, focused files (e.g., forms.css, utilities.css, responsive.css)
2. Using CSS modules or a CSS-in-JS solution for better scoping
3. Implementing a CSS methodology like BEM or SMACSS for better structure

Would you like me to help create a plan for reorganizing the CSS structure?

🧰 Tools

🪛 Biome

[error] 15-15: Unexpected shorthand property background after background-image

(lint/suspicious/noShorthandPropertyOverrides)

---

[error] 15-15: Unexpected shorthand property text-decoration after text-decoration-thickness

(lint/suspicious/noShorthandPropertyOverrides)

---

Line range hint 375-768: Review media query breakpoints

The media query breakpoints use a mix of min-width and max-width which can lead to overlapping styles. Consider standardizing the approach:

/* Mobile first approach */
@media (min-width: 375px) { /* Mobile styles */ }
@media (min-width: 768px) { /* Tablet styles */ }
@media (min-width: 1024px) { /* Desktop styles */ }

🧰 Tools

🪛 Biome

[error] 15-15: Unexpected shorthand property background after background-image

(lint/suspicious/noShorthandPropertyOverrides)

---

[error] 15-15: Unexpected shorthand property text-decoration after text-decoration-thickness

(lint/suspicious/noShorthandPropertyOverrides)

---

Line range hint 100-500: Consider using CSS custom properties for repeated values

There are several repeated values (colors, spacing, font-families) that could be defined as CSS custom properties (variables) at the root level for better maintainability.

Example:

:root {
  --color-primary: #d64631;
  --font-family-base: "Open Sans", sans-serif;
  --border-radius: 4px;
  /* ... other variables */
}

🧰 Tools

🪛 Biome

[error] 15-15: Unexpected shorthand property background after background-image

(lint/suspicious/noShorthandPropertyOverrides)

---

[error] 15-15: Unexpected shorthand property text-decoration after text-decoration-thickness

(lint/suspicious/noShorthandPropertyOverrides)

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between ae3274a and efeb131.

📒 Files selected for processing (2)

• wp-content/themes/goonj-crm/assets/styles/contribution.scss (2 hunks)
• wp-content/themes/goonj-crm/style.css (1 hunks)

🧰 Additional context used

🪛 Biome

wp-content/themes/goonj-crm/style.css

[error] 15-15: Unexpected shorthand property background after background-image

(lint/suspicious/noShorthandPropertyOverrides)

---

[error] 15-15: Unexpected shorthand property text-decoration after text-decoration-thickness

(lint/suspicious/noShorthandPropertyOverrides)

[coderabbitai]

🛠️ Refactor suggestion

Consolidate label visibility styles

Multiple instances of display: none !important for labels suggest a need for a unified approach to handle label visibility.

Consider creating a utility class:

.hidden-label {
  display: none !important;
}

Then apply this class in your HTML instead of using CSS selectors to hide specific labels.

[coderabbitai]

🛠️ Refactor suggestion

Avoid using !important declarations for border properties

The !important declaration on border-top: none indicates potential specificity issues in the CSS cascade. Consider refactoring the selectors to be more specific instead.

- border-top: none !important
+ border-top: none

Committable suggestion skipped: line range outside the PR's diff.

[coderabbitai]

⚠️ Potential issue

Fix CSS property override issues

There are two potential CSS property override issues that could cause unexpected behavior:

1. The background shorthand property is used after background-image, which may override previously set background properties.
2. The text-decoration shorthand property is used after text-decoration-thickness, which may override previously set text decoration properties.

To fix these issues, either:

1. Reorder the properties to use shorthand properties first, or
2. Use longhand properties consistently

- text-decoration-thickness: 1px;
- text-underline-offset: 4px;
- text-decoration: underline;
+ text-decoration: underline;
+ text-decoration-thickness: 1px;
+ text-underline-offset: 4px;

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	*/#crm-main-content-wrapper form .crm-contribution-main-form-block .crm-public-form-item fieldset legend{display:none !important}#crm-main-content-wrapper form .crm-contribution-main-form-block #priceset-div .crm-section .crm-section,#crm-main-content-wrapper form .crm-contribution-main-form-block .crm-public-form-item{display:grid !important;border-top:none !important}#crm-main-content-wrapper form .crm-contribution-main-form-block #priceset-div .crm-section .crm-section .content,#crm-main-content-wrapper form .crm-contribution-main-form-block .crm-public-form-item .content{margin-left:0 !important;gap:30px;align-items:center}#crm-main-content-wrapper form .crm-contribution-main-form-block #priceset-div .crm-section .crm-section .content input,#crm-main-content-wrapper form .crm-contribution-main-form-block .crm-public-form-item .content input{border:1px solid rgba(0,0,0,.3) !important;border-radius:4px !important;padding:7px !important;background-image:none !important}#crm-main-content-wrapper form .crm-contribution-main-form-block #priceset-div .crm-section .crm-section .label,#crm-main-content-wrapper form .crm-contribution-main-form-block .crm-public-form-item .label,#crm-main-content-wrapper form .crm-contribution-main-form-block fieldset legend{text-align:justify !important;width:50% !important;font-family:"Open Sans",sans-serif !important;line-height:16px !important;padding-left:0 !important}#crm-main-content-wrapper form .crm-contribution-main-form-block fieldset .payment_processor-section .label label{display:none !important}#crm-main-content-wrapper form .crm-contribution-main-form-block .crm-public-form-item .crm-profile{display:block !important;margin-top:0 !important}#crm-main-content-wrapper form .crm-contribution-main-form-block .crm-public-form-item .crm-profile div{width:85vw !important}#crm-main-content-wrapper form .crm-contribution-main-form-block .crm-public-form-item .content div a{background-image:none !important}#crm-main-content-wrapper form .crm-contribution-main-form-block .crm-public-form-item .content div a span{border-left:none !important;background-image:none !important;background:#fff !important}#crm-main-content-wrapper form .crm-contribution-main-form-block .crm-public-form-item .content div a span b{top:9px !important;left:0px !important}#crm-main-content-wrapper form .crm-contribution-main-form-block .crm-public-form-item .content label{font-family:"Open Sans",sans-serif !important;line-height:16px !important}#crm-main-content-wrapper form .crm-contribution-main-form-block .crm-public-form-item .content .crm-form-radio{max-width:22px !important}#crm-main-content-wrapper form .crm-contribution-main-form-block #crm-submit-buttons button{font-weight:400;font-family:"Open Sans",sans-serif !important;font-size:14px;line-height:16px}#crm-main-content-wrapper form .crm-contribution-main-form-block #crm-submit-buttons button{height:45px;width:100%;background-color:#d64631 !important;border:none;border-radius:4px !important}#crm-main-content-wrapper form .crm-contribution-main-form-block #crm-submit-buttons button i{display:none !important}#crm-main-content-wrapper form .crm-contribution-main-form-block #billing-payment-block{display:none !important}#crm-main-content-wrapper form .crm-contribution-main-form-block .crm-public-form-item fieldset div .content div a .select2-chosen{padding-top:10px !important}#crm-main-content-wrapper form .crm-contribution-main-form-block .crm-public-form-item fieldset div .content div a abbr{top:22px !important}#crm-main-content-wrapper form .crm-contribution-main-form-block .crm-public-form-item fieldset>div:nth-last-child(-n+2){display:none}@media(min-width: 480px){#crm-main-content-wrapper form .crm-contribution-main-form-block .crm-public-form-item .crm-profile div .label{text-align:justify !important}#crm-main-content-wrapper form .crm-contribution-main-form-block .crm-public-form-item .crm-profile div .content{margin-left:0 !important}#crm-main-content-wrapper form .crm-contribution-main-form-block .crm-public-form-item .crm-profile div{width:100% !important}}.select2-drop ul li div{font-weight:400;font-family:"Open Sans",sans-serif !important;font-size:14px;line-height:16px}#crm-container .crm-title{display:none !important}#crm-main-content-wrapper form .crm-contribution-thankyou-form-block fieldset fieldset legend{display:none !important}#crm-main-content-wrapper form .crm-contribution-thankyou-form-block fieldset fieldset .header-dark{width:100% !important}#crm-main-content-wrapper form .crm-contribution-thankyou-form-block .crm-group.billing_name_address-group{display:none !important}#crm-main-content-wrapper form .crm-contribution-thankyou-form-block fieldset fieldset div .content{margin-left:0 !important}#crm-main-content-wrapper form .crm-contribution-thankyou-form-block #thankyou_text p{place-self:center !important;margin-bottom:50px}#crm-main-content-wrapper form .crm-contribution-thankyou-form-block .help .bold p,#crm-main-content-wrapper form .crm-contribution-thankyou-form-block .crm-group .header-dark,#crm-main-content-wrapper form .crm-contribution-thankyou-form-block .crm-group .display-block,#crm-main-content-wrapper form .crm-contribution-thankyou-form-block fieldset fieldset div,#crm-main-content-wrapper form .crm-contribution-thankyou-form-block .crm-group .crm-section div{font-weight:400;font-family:"Open Sans",sans-serif !important;font-size:14px;line-height:16px}#crm-main-content-wrapper form .crm-contribution-thankyou-form-block .help div{font-weight:400;font-family:"Open Sans",sans-serif !important;font-size:12px;line-height:16px}#crm-main-content-wrapper form .crm-contribution-thankyou-form-block fieldset fieldset div{margin:12px !important;padding:11px 3px 10px 0px !important;margin-left:0px !important;width:100% !important;margin-bottom:-18px !important}#crm-main-content-wrapper form .crm-contribution-thankyou-form-block fieldset fieldset div .label label{font-weight:600 !important}#crm-main-content-wrapper form .crm-contribution-thankyou-form-block .crm-group .header-dark{padding-left:6px !important}#crm-main-content-wrapper form .crm-contribution-thankyou-form-block fieldset{border-top:none !important}#crm-main-content-wrapper form .crm-contribution-thankyou-form-block fieldset>div:nth-last-child(-n+2){display:none !important}@media(min-width: 375px)and (max-width: 768px){#crm-main-content-wrapper form .crm-contribution-thankyou-form-block fieldset fieldset div{padding:5px 113px 0px 0px !important;flex:none !important;margin:1px !important}#crm-main-content-wrapper form .crm-contribution-thankyou-form-block fieldset fieldset .header-dark{width:57% !important}}#crm-container .crm-public-footer{display:none !important}.w-16{width:16px !important}.h-16{height:16px !important}.min-h-16{min-height:16px}.max-h-16{max-height:16px}.min-w-16{min-width:16px}.max-w-16{max-width:16px}.w-25{width:25px !important}.h-25{height:25px !important}.min-h-25{min-height:25px}.max-h-25{max-height:25px}.min-w-25{min-width:25px}.max-w-25{max-width:25px}.w-50{width:50px !important}.h-50{height:50px !important}.min-h-50{min-height:50px}.max-h-50{max-height:50px}.min-w-50{min-width:50px}.max-w-50{max-width:50px}.w-60{width:60px !important}.h-60{height:60px !important}.min-h-60{min-height:60px}.max-h-60{max-height:60px}.min-w-60{min-width:60px}.max-w-60{max-width:60px}.w-75{width:75px !important}.h-75{height:75px !important}.min-h-75{min-height:75px}.max-h-75{max-height:75px}.min-w-75{min-width:75px}.max-w-75{max-width:75px}.w-95{width:95px !important}.h-95{height:95px !important}.min-h-95{min-height:95px}.max-h-95{max-height:95px}.min-w-95{min-width:95px}.max-w-95{max-width:95px}.w-100{width:100px !important}.h-100{height:100px !important}.min-h-100{min-height:100px}.max-h-100{max-height:100px}.min-w-100{min-width:100px}.max-w-100{max-width:100px}.w-140{width:140px !important}.h-140{height:140px !important}.min-h-140{min-height:140px}.max-h-140{max-height:140px}.min-w-140{min-width:140px}.max-w-140{max-width:140px}.w-150{width:150px !important}.h-150{height:150px !important}.min-h-150{min-height:150px}.max-h-150{max-height:150px}.min-w-150{min-width:150px}.max-w-150{max-width:150px}.w-200{width:200px !important}.h-200{height:200px !important}.min-h-200{min-height:200px}.max-h-200{max-height:200px}.min-w-200{min-width:200px}.max-w-200{max-width:200px}.w-520{width:520px !important}.h-520{height:520px !important}.min-h-520{min-height:520px}.max-h-520{max-height:520px}.min-w-520{min-width:520px}.max-w-520{max-width:520px}.w-550{width:550px !important}.h-550{height:550px !important}.min-h-550{min-height:550px}.max-h-550{max-height:550px}.min-w-550{min-width:550px}.max-w-550{max-width:550px}.w-25p{width:25% !important}.h-25p{height:25% !important}.min-h-25p{min-height:25%}.max-h-25p{max-height:25%}.min-w-25p{min-width:25%}.max-w-25p{max-width:25%}.w-50p{width:50% !important}.h-50p{height:50% !important}.min-h-50p{min-height:50%}.max-h-50p{max-height:50%}.min-w-50p{min-width:50%}.max-w-50p{max-width:50%}.w-75p{width:75% !important}.h-75p{height:75% !important}.min-h-75p{min-height:75%}.max-h-75p{max-height:75%}.min-w-75p{min-width:75%}.max-w-75p{max-width:75%}.w-100p{width:100% !important}.h-100p{height:100% !important}.min-h-100p{min-height:100%}.max-h-100p{max-height:100%}.min-w-100p{min-width:100%}.max-w-100p{max-width:100%}.fz-14{font-size:14px !important}.fz-16{font-size:16px !important}.fz-20{font-size:20px !important}.fw-400{font-weight:400 !important}.fw-600{font-weight:600 !important}.mr-0{margin-right:0px !important}.ml-0{margin-left:0px !important}.mt-0{margin-top:0px !important}.mb-0{margin-bottom:0px !important}.pr-0{padding-right:0px !important}.pl-0{padding-left:0px !important}.pt-0{padding-top:0px !important}.pb-0{padding-bottom:0px !important}.mr-2{margin-right:2px !important}.ml-2{margin-left:2px !important}.mt-2{margin-top:2px !important}.mb-2{margin-bottom:2px !important}.pr-2{padding-right:2px !important}.pl-2{padding-left:2px !important}.pt-2{padding-top:2px !important}.pb-2{padding-bottom:2px !important}.mr-6{margin-right:6px !important}.ml-6{margin-left:6px !important}.mt-6{margin-top:6px !important}.mb-6{margin-bottom:6px !important}.pr-6{padding-right:6px !important}.pl-6{padding-left:6px !important}.pt-6{padding-top:6px !important}.pb-6{padding-bottom:6px !important}.mr-11{margin-right:11px !important}.ml-11{margin-left:11px !important}.mt-11{margin-top:11px !important}.mb-11{margin-bottom:11px !important}.pr-11{padding-right:11px !important}.pl-11{padding-left:11px !important}.pt-11{padding-top:11px !important}.pb-11{padding-bottom:11px !important}.mr-12{margin-right:12px !important}.ml-12{margin-left:12px !important}.mt-12{margin-top:12px !important}.mb-12{margin-bottom:12px !important}.pr-12{padding-right:12px !important}.pl-12{padding-left:12px !important}.pt-12{padding-top:12px !important}.pb-12{padding-bottom:12px !important}.mr-15{margin-right:15px !important}.ml-15{margin-left:15px !important}.mt-15{margin-top:15px !important}.mb-15{margin-bottom:15px !important}.pr-15{padding-right:15px !important}.pl-15{padding-left:15px !important}.pt-15{padding-top:15px !important}.pb-15{padding-bottom:15px !important}.mr-24{margin-right:24px !important}.ml-24{margin-left:24px !important}.mt-24{margin-top:24px !important}.mb-24{margin-bottom:24px !important}.pr-24{padding-right:24px !important}.pl-24{padding-left:24px !important}.pt-24{padding-top:24px !important}.pb-24{padding-bottom:24px !important}.mr-25{margin-right:25px !important}.ml-25{margin-left:25px !important}.mt-25{margin-top:25px !important}.mb-25{margin-bottom:25px !important}.pr-25{padding-right:25px !important}.pl-25{padding-left:25px !important}.pt-25{padding-top:25px !important}.pb-25{padding-bottom:25px !important}.mr-27{margin-right:27px !important}.ml-27{margin-left:27px !important}.mt-27{margin-top:27px !important}.mb-27{margin-bottom:27px !important}.pr-27{padding-right:27px !important}.pl-27{padding-left:27px !important}.pt-27{padding-top:27px !important}.pb-27{padding-bottom:27px !important}.mr-30{margin-right:30px !important}.ml-30{margin-left:30px !important}.mt-30{margin-top:30px !important}.mb-30{margin-bottom:30px !important}.pr-30{padding-right:30px !important}.pl-30{padding-left:30px !important}.pt-30{padding-top:30px !important}.pb-30{padding-bottom:30px !important}.mr-36{margin-right:36px !important}.ml-36{margin-left:36px !important}.mt-36{margin-top:36px !important}.mb-36{margin-bottom:36px !important}.pr-36{padding-right:36px !important}.pl-36{padding-left:36px !important}.pt-36{padding-top:36px !important}.pb-36{padding-bottom:36px !important}a{color:#d64631;cursor:pointer}body p{font-family:Open Sans;font-size:12px;font-weight:400;line-height:16px;letter-spacing:-0.02em}.has-login-form{display:flex;justify-content:center;padding:15px}.has-login-form form{width:-webkit-fill-available}.has-login-form form p{display:grid}.login-remember{display:flex !important;align-items:center}.login-remember label{display:flex !important;align-items:center}form input{height:29px !important;border:1px solid rgba(0,0,0,.3) !important;border-radius:4px !important;flex:1;padding:8px 12px;border-radius:4px;font-size:16px}.error{color:red !important;font-size:12px;margin-bottom:10px}.button-primary{background:#d64631 !important;color:#fff;border:none !important;height:45px !important;cursor:pointer}.button-primary:active{background:#80271a !important}.wp-form-block-group{padding-left:24px;padding-right:24px;font-family:Open Sans}.form-heading{font-size:16px;font-weight:600;line-height:21.79px;padding-top:24px}.form-description{font-size:16px;font-weight:400;line-height:21.79px;margin-top:5px}.select2-drop.select2-drop-active.crm-container{border-color:rgba(0,0,0,.3) !important}.crm-container{padding:24px;background-color:#fff !important}.crm-container .crm-profile{border:none;padding:10px 0;margin:30px 0;display:flex;flex-wrap:wrap}.crm-container .form-item{margin-bottom:15px;flex:1;display:flex;flex-direction:column}.crm-container .form-item label{font-size:14px}.crm-container .form-item label span.crm-marker{color:red}.crm-container .content{display:flex}.crm-container input{flex:1;padding:8px 12px;border-radius:4px;font-size:16px;box-shadow:none !important}.crm-container .select2-container .select2-choice{box-shadow:none !important;-webkit-box-shadow:none !important}.crm-container .select2-search-choice-close{top:9px !important}.crm-container .select2-search-choice-close::before{color:#000 !important}.crm-container .form-control{min-height:45px;border:1px solid rgba(0,0,0,.3) !important;border-radius:4px !important;box-shadow:none !important}.crm-container .select2-container-multi>.select2-choices{min-height:43px !important;box-shadow:none !important;padding-bottom:10px}.crm-container .crm-af-field>.form-group{margin-bottom:0px !important}.crm-container .select2-chosen,.crm-container .select2-arrow{padding-top:7px !important;color:#000 !important}.crm-container .select2-choices,.crm-container ::before{padding-top:8px !important}.crm-container .af-field-type-hidden{display:none !important}.crm-container .btn-primary{background:#d64631 !important;width:100%;height:45px !important;margin-top:45px !important}.crm-container .btn-primary:active{background:#80271a !important}.crm-container .crm-af-field-label{color:#000 !important;font-family:Open Sans;font-size:12px;font-weight:400 !important;line-height:16.34px;letter-spacing:-0.02em;text-align:left}.crm-container .select2-drop-active,.crm-container .select2-search>input{border-color:rgba(195,184,184,.3) !important;padding:10px}.crm-container .select2-container-multi .select2-choices{min-height:45px}.crm-container .select2-search-choice{padding:8px 25px 8px 8px !important;border:1px solid rgba(0,0,0,.3) !important}.crm-container .select2-default>.select2-chosen{color:#a59f9f !important}.crm-container .af-field-type-hidden{display:none}.crm-container .select2-container .select2-choice{min-height:45px !important}.crm-container fieldset .af-layout-cols{display:block !important;flex-wrap:nowrap !important}.crm-container .crm-af-field,.crm-container af-field{margin-bottom:10px !important}.crm-container .af-field-type-email,.crm-container .af-field-type-text{width:100% !important}.d-grid{display:grid}.wp-form-block-group .wp-block-group.w-lg-520.has-global-padding.is-layout-constrained{margin-left:0 !important}.font-sans{font-family:"Open Sans",sans-serif !important}.mobile-margins-l24-r30{margin-left:24px !important;margin-right:30px !important;margin-bottom:30px !important}.mobile-margin-left-30{margin-left:30px !important}.border-none{border:none !important}.text-decoration-none{text-decoration:none !important}.text-white{color:#fff !important}.text-light-red{color:#d64631 !important}.bg-white{background-color:#fff !important}.red-border{border:1px solid #d64631 !important}.br-4{border-radius:4px}.m-auto{margin:auto !important}.contact-info{font-size:16px;margin-bottom:24px}.contact-item{display:flex;align-items:center;margin-bottom:16px}.contact-item .icon{margin-right:10px;width:20px;height:16px}.contact-link{text-decoration-thickness:1px;text-underline-offset:4px;text-decoration:underline;color:#d64631}#bootstrap-theme .btn-primary{border-radius:4px !important}.required-indicator{color:#d64631 !important}.errorMessage{color:#d64631;margin-top:2px;font-size:.875rem;font-family:"Open Sans",sans-serif}.input-error{border-color:#d64631 !important}#bootstrap-theme input[type=radio],#bootstrap-theme input[type=checkbox]{margin-top:0 !important}.crm-af-field.ng-scope .ng-binding.ng-scope{margin-right:30px !important}.af-container .af-container .af-text{margin-left:10px !important}[af-fieldset=Individual1] .af-title,[af-fieldset=Individual2] .af-title,[af-fieldset=Individual3] .af-title,[af-fieldset=Individual4] .af-title,[af-fieldset=Individual5] .af-title{font-weight:400;font-size:16px !important;margin-left:10px;text-transform:uppercase;padding-top:20px !important;color:#000 !important}.align-items-center{align-items:center}.d-flex{display:flex}.justify-content-center{justify-content:center}.volunteer-button-container{display:flex;justify-content:center;align-items:center}.wp-block-gb-slots-wrapper .wp-block-gb-slots-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:20px;font-family:inherit}.wp-block-gb-slots-wrapper .wp-block-gb-slot-box{border:1px solid #ccc;padding:10px;text-align:center;font-family:inherit;font-size:inherit;line-height:inherit}.wp-block-gb-slots-wrapper .wp-block-gb-slot-day{font-size:1.2em;font-weight:bold;font-family:inherit}.wp-block-gb-slots-wrapper .wp-block-gb-slot-date,.wp-block-gb-slots-wrapper .wp-block-gb-slot-time{margin:5px 0;font-family:inherit;font-size:inherit;line-height:inherit}.wp-block-gb-slots-wrapper .wp-block-gb-action-button{display:inline-block;padding:8px 16px;background-color:#cf2e2e;color:#fff;text-decoration:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease;font-family:inherit;font-size:inherit;line-height:inherit}.wp-block-gb-slots-wrapper .wp-block-gb-action-button:hover{background-color:#a52727}.wp-block-gb-slots-wrapper .wp-block-gb-action-button.disabled{background-color:#ccc;color:#666;cursor:not-allowed}.wp-block-gb-slots-wrapper .wp-block-gb-action-button.disabled:hover{background-color:#ccc}@media(max-width: 768px){.wp-block-gb-slots-wrapper .wp-block-gb-slots-grid{grid-template-columns:1fr}}.volunteer-button-link{border-style:none;border-width:0px;border-radius:5px}.font-family{font-family:"Open Sans",sans-serif}.border-radius{border-radius:4px}.header-text{line-height:24px !important}.subheader-text{line-height:22px !important}.wp-block-gb-goonj-blocks{flex-wrap:nowrap !important}.wp-block-gb-action-button{padding:16px 11px !important;font-size:15px !important}@media(min-width: 375px)and (max-width: 768px){.wp-block-gb-goonj-blocks{width:90% !important;gap:5px !important;justify-content:center !important;flex-wrap:wrap !important}.container{max-width:86%}.wp-block-gb-goonj-blocks .wp-block-gb-action-button{padding:16px 12px !important;display:block;width:100%;text-align:center;margin-bottom:10px}.wp-block-gb-table{max-width:75%}}@media(min-width: 768px){.w-md-16{width:16px !important}.h-md-16{height:16px !important}.min-h-md-16{min-height:16px}.max-h-md-16{max-height:16px}.min-w-md-16{min-width:16px}.max-w-md-16{max-width:16px}.w-md-25{width:25px !important}.h-md-25{height:25px !important}.min-h-md-25{min-height:25px}.max-h-md-25{max-height:25px}.min-w-md-25{min-width:25px}.max-w-md-25{max-width:25px}.w-md-50{width:50px !important}.h-md-50{height:50px !important}.min-h-md-50{min-height:50px}.max-h-md-50{max-height:50px}.min-w-md-50{min-width:50px}.max-w-md-50{max-width:50px}.w-md-60{width:60px !important}.h-md-60{height:60px !important}.min-h-md-60{min-height:60px}.max-h-md-60{max-height:60px}.min-w-md-60{min-width:60px}.max-w-md-60{max-width:60px}.w-md-75{width:75px !important}.h-md-75{height:75px !important}.min-h-md-75{min-height:75px}.max-h-md-75{max-height:75px}.min-w-md-75{min-width:75px}.max-w-md-75{max-width:75px}.w-md-95{width:95px !important}.h-md-95{height:95px !important}.min-h-md-95{min-height:95px}.max-h-md-95{max-height:95px}.min-w-md-95{min-width:95px}.max-w-md-95{max-width:95px}.w-md-100{width:100px !important}.h-md-100{height:100px !important}.min-h-md-100{min-height:100px}.max-h-md-100{max-height:100px}.min-w-md-100{min-width:100px}.max-w-md-100{max-width:100px}.w-md-140{width:140px !important}.h-md-140{height:140px !important}.min-h-md-140{min-height:140px}.max-h-md-140{max-height:140px}.min-w-md-140{min-width:140px}.max-w-md-140{max-width:140px}.w-md-150{width:150px !important}.h-md-150{height:150px !important}.min-h-md-150{min-height:150px}.max-h-md-150{max-height:150px}.min-w-md-150{min-width:150px}.max-w-md-150{max-width:150px}.w-md-200{width:200px !important}.h-md-200{height:200px !important}.min-h-md-200{min-height:200px}.max-h-md-200{max-height:200px}.min-w-md-200{min-width:200px}.max-w-md-200{max-width:200px}.w-md-520{width:520px !important}.h-md-520{height:520px !important}.min-h-md-520{min-height:520px}.max-h-md-520{max-height:520px}.min-w-md-520{min-width:520px}.max-w-md-520{max-width:520px}.w-md-550{width:550px !important}.h-md-550{height:550px !important}.min-h-md-550{min-height:550px}.max-h-md-550{max-height:550px}.min-w-md-550{min-width:550px}.max-w-md-550{max-width:550px}.w-md-25p{width:25% !important}.h-md-25p{height:25% !important}.min-h-md-25p{min-height:25%}.max-h-md-25p{max-height:25%}.min-w-md-25p{min-width:25%}.max-w-md-25p{max-width:25%}.w-md-50p{width:50% !important}.h-md-50p{height:50% !important}.min-h-md-50p{min-height:50%}.max-h-md-50p{max-height:50%}.min-w-md-50p{min-width:50%}.max-w-md-50p{max-width:50%}.w-md-75p{width:75% !important}.h-md-75p{height:75% !important}.min-h-md-75p{min-height:75%}.max-h-md-75p{max-height:75%}.min-w-md-75p{min-width:75%}.max-w-md-75p{max-width:75%}.w-md-100p{width:100% !important}.h-md-100p{height:100% !important}.min-h-md-100p{min-height:100%}.max-h-md-100p{max-height:100%}.min-w-md-100p{min-width:100%}.max-w-md-100p{max-width:100%}.ml-md-0{margin-left:0px !important}.mr-md-0{margin-right:0px !important}.ml-md-2{margin-left:2px !important}.mr-md-2{margin-right:2px !important}.ml-md-6{margin-left:6px !important}.mr-md-6{margin-right:6px !important}.ml-md-11{margin-left:11px !important}.mr-md-11{margin-right:11px !important}.ml-md-12{margin-left:12px !important}.mr-md-12{margin-right:12px !important}.ml-md-15{margin-left:15px !important}.mr-md-15{margin-right:15px !important}.ml-md-24{margin-left:24px !important}.mr-md-24{margin-right:24px !important}.ml-md-25{margin-left:25px !important}.mr-md-25{margin-right:25px !important}.ml-md-27{margin-left:27px !important}.mr-md-27{margin-right:27px !important}.ml-md-30{margin-left:30px !important}.mr-md-30{margin-right:30px !important}.ml-md-36{margin-left:36px !important}.mr-md-36{margin-right:36px !important}.crm-container{padding:24px}.crm-container .form-item{margin-right:15px}}@media(min-width: 1024px){.w-lg-16{width:16px !important}.h-lg-16{height:16px !important}.min-h-lg-16{min-height:16px}.max-h-lg-16{max-height:16px}.min-w-lg-16{min-width:16px}.max-w-lg-16{max-width:16px}.w-lg-25{width:25px !important}.h-lg-25{height:25px !important}.min-h-lg-25{min-height:25px}.max-h-lg-25{max-height:25px}.min-w-lg-25{min-width:25px}.max-w-lg-25{max-width:25px}.w-lg-50{width:50px !important}.h-lg-50{height:50px !important}.min-h-lg-50{min-height:50px}.max-h-lg-50{max-height:50px}.min-w-lg-50{min-width:50px}.max-w-lg-50{max-width:50px}.w-lg-60{width:60px !important}.h-lg-60{height:60px !important}.min-h-lg-60{min-height:60px}.max-h-lg-60{max-height:60px}.min-w-lg-60{min-width:60px}.max-w-lg-60{max-width:60px}.w-lg-75{width:75px !important}.h-lg-75{height:75px !important}.min-h-lg-75{min-height:75px}.max-h-lg-75{max-height:75px}.min-w-lg-75{min-width:75px}.max-w-lg-75{max-width:75px}.w-lg-95{width:95px !important}.h-lg-95{height:95px !important}.min-h-lg-95{min-height:95px}.max-h-lg-95{max-height:95px}.min-w-lg-95{min-width:95px}.max-w-lg-95{max-width:95px}.w-lg-100{width:100px !important}.h-lg-100{height:100px !important}.min-h-lg-100{min-height:100px}.max-h-lg-100{max-height:100px}.min-w-lg-100{min-width:100px}.max-w-lg-100{max-width:100px}.w-lg-140{width:140px !important}.h-lg-140{height:140px !important}.min-h-lg-140{min-height:140px}.max-h-lg-140{max-height:140px}.min-w-lg-140{min-width:140px}.max-w-lg-140{max-width:140px}.w-lg-150{width:150px !important}.h-lg-150{height:150px !important}.min-h-lg-150{min-height:150px}.max-h-lg-150{max-height:150px}.min-w-lg-150{min-width:150px}.max-w-lg-150{max-width:150px}.w-lg-200{width:200px !important}.h-lg-200{height:200px !important}.min-h-lg-200{min-height:200px}.max-h-lg-200{max-height:200px}.min-w-lg-200{min-width:200px}.max-w-lg-200{max-width:200px}.w-lg-520{width:520px !important}.h-lg-520{height:520px !important}.min-h-lg-520{min-height:520px}.max-h-lg-520{max-height:520px}.min-w-lg-520{min-width:520px}.max-w-lg-520{max-width:520px}.w-lg-550{width:550px !important}.h-lg-550{height:550px !important}.min-h-lg-550{min-height:550px}.max-h-lg-550{max-height:550px}.min-w-lg-550{min-width:550px}.max-w-lg-550{max-width:550px}.w-lg-25p{width:25% !important}.h-lg-25p{height:25% !important}.min-h-lg-25p{min-height:25%}.max-h-lg-25p{max-height:25%}.min-w-lg-25p{min-width:25%}.max-w-lg-25p{max-width:25%}.w-lg-50p{width:50% !important}.h-lg-50p{height:50% !important}.min-h-lg-50p{min-height:50%}.max-h-lg-50p{max-height:50%}.min-w-lg-50p{min-width:50%}.max-w-lg-50p{max-width:50%}.w-lg-75p{width:75% !important}.h-lg-75p{height:75% !important}.min-h-lg-75p{min-height:75%}.max-h-lg-75p{max-height:75%}.min-w-lg-75p{min-width:75%}.max-w-lg-75p{max-width:75%}.w-lg-100p{width:100% !important}.h-lg-100p{height:100% !important}.min-h-lg-100p{min-height:100%}.max-h-lg-100p{max-height:100%}.min-w-lg-100p{min-width:100%}.max-w-lg-100p{max-width:100%}body p{font-size:16px;line-height:21.79px;letter-spacing:-0.02em}.wp-block-loginout{width:520px;margin-left:auto;margin-right:auto}.error{font-size:14px}.wp-block-post-template-is-layout-flow{max-width:750px !important}.form-heading,.form-description{margin:0px !important;max-width:100% !important}.wp-block-group-is-layout-constrained{margin-right:0px !important;margin-left:0px !important;max-width:100% !important}.crm-container{width:720px !important;padding:15px}.crm-container af-form{margin-left:auto;margin-right:auto}.crm-container .select2-container .select2-choice abbr{top:10px !important}.crm-container .crm-af-field-label{font-size:16px;font-weight:400 !important;line-height:21px}.crm-container .error{font-size:14px}.crm-container .af-container:not(:has(.af-container)){display:flex !important;flex-wrap:wrap !important}.crm-container .af-container af-field{flex:1 1 33% !important;box-sizing:border-box !important;padding:10px !important}.crm-container .af-field-type-email>.crm-af-field,.crm-container div[af-join]>af-field{padding-bottom:0px !important}.crm-container .af-field-type-email>.crm-af-field>.crm-af-field,.crm-container div[af-join]>af-field>.crm-af-field{padding-right:10px !important;padding-left:10px !important}.crm-container .af-container.af-layout-inline>*{margin-right:0px !important}.crm-container .crm-af-field,.crm-container af-field{margin-bottom:0px !important}.crm-container .btn-primary{margin-left:10px !important;margin-right:10px !important}.crm-container fieldset .af-layout-cols{display:flex !important;flex-wrap:wrap !important}}@media(min-width: 1200px){.w-xl-16{width:16px !important}.h-xl-16{height:16px !important}.min-h-xl-16{min-height:16px}.max-h-xl-16{max-height:16px}.min-w-xl-16{min-width:16px}.max-w-xl-16{max-width:16px}.w-xl-25{width:25px !important}.h-xl-25{height:25px !important}.min-h-xl-25{min-height:25px}.max-h-xl-25{max-height:25px}.min-w-xl-25{min-width:25px}.max-w-xl-25{max-width:25px}.w-xl-50{width:50px !important}.h-xl-50{height:50px !important}.min-h-xl-50{min-height:50px}.max-h-xl-50{max-height:50px}.min-w-xl-50{min-width:50px}.max-w-xl-50{max-width:50px}.w-xl-60{width:60px !important}.h-xl-60{height:60px !important}.min-h-xl-60{min-height:60px}.max-h-xl-60{max-height:60px}.min-w-xl-60{min-width:60px}.max-w-xl-60{max-width:60px}.w-xl-75{width:75px !important}.h-xl-75{height:75px !important}.min-h-xl-75{min-height:75px}.max-h-xl-75{max-height:75px}.min-w-xl-75{min-width:75px}.max-w-xl-75{max-width:75px}.w-xl-95{width:95px !important}.h-xl-95{height:95px !important}.min-h-xl-95{min-height:95px}.max-h-xl-95{max-height:95px}.min-w-xl-95{min-width:95px}.max-w-xl-95{max-width:95px}.w-xl-100{width:100px !important}.h-xl-100{height:100px !important}.min-h-xl-100{min-height:100px}.max-h-xl-100{max-height:100px}.min-w-xl-100{min-width:100px}.max-w-xl-100{max-width:100px}.w-xl-140{width:140px !important}.h-xl-140{height:140px !important}.min-h-xl-140{min-height:140px}.max-h-xl-140{max-height:140px}.min-w-xl-140{min-width:140px}.max-w-xl-140{max-width:140px}.w-xl-150{width:150px !important}.h-xl-150{height:150px !important}.min-h-xl-150{min-height:150px}.max-h-xl-150{max-height:150px}.min-w-xl-150{min-width:150px}.max-w-xl-150{max-width:150px}.w-xl-200{width:200px !important}.h-xl-200{height:200px !important}.min-h-xl-200{min-height:200px}.max-h-xl-200{max-height:200px}.min-w-xl-200{min-width:200px}.max-w-xl-200{max-width:200px}.w-xl-520{width:520px !important}.h-xl-520{height:520px !important}.min-h-xl-520{min-height:520px}.max-h-xl-520{max-height:520px}.min-w-xl-520{min-width:520px}.max-w-xl-520{max-width:520px}.w-xl-550{width:550px !important}.h-xl-550{height:550px !important}.min-h-xl-550{min-height:550px}.max-h-xl-550{max-height:550px}.min-w-xl-550{min-width:550px}.max-w-xl-550{max-width:550px}.w-xl-25p{width:25% !important}.h-xl-25p{height:25% !important}.min-h-xl-25p{min-height:25%}.max-h-xl-25p{max-height:25%}.min-w-xl-25p{min-width:25%}.max-w-xl-25p{max-width:25%}.w-xl-50p{width:50% !important}.h-xl-50p{height:50% !important}.min-h-xl-50p{min-height:50%}.max-h-xl-50p{max-height:50%}.min-w-xl-50p{min-width:50%}.max-w-xl-50p{max-width:50%}.w-xl-75p{width:75% !important}.h-xl-75p{height:75% !important}.min-h-xl-75p{min-height:75%}.max-h-xl-75p{max-height:75%}.min-w-xl-75p{min-width:75%}.max-w-xl-75p{max-width:75%}.w-xl-100p{width:100% !important}.h-xl-100p{height:100% !important}.min-h-xl-100p{min-height:100%}.max-h-xl-100p{max-height:100%}.min-w-xl-100p{min-width:100%}.max-w-xl-100p{max-width:100%}}
	.contact-link {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	color: #d64631;
	}

🧰 Tools

🪛 Biome

[error] 15-15: Unexpected shorthand property background after background-image

(lint/suspicious/noShorthandPropertyOverrides)

---

[error] 15-15: Unexpected shorthand property text-decoration after text-decoration-thickness

(lint/suspicious/noShorthandPropertyOverrides)

[coderabbitai]

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (3)

wp-content/themes/goonj-crm/style.css (3)

Line range hint 768-1024: Consider consolidating media queries for better maintainability.

The media queries are scattered throughout the file and some have overlapping breakpoints. Consider:

1. Grouping all media queries at the end of the file
2. Using consistent breakpoints
3. Avoiding overlapping ranges

Example organization:

/* Base styles */
/* ... */

/* Tablet (768px and up) */
@media (min-width: 768px) {
  /* ... */
}

/* Desktop (1024px and up) */
@media (min-width: 1024px) {
  /* ... */
}

/* Large Desktop (1200px and up) */
@media (min-width: 1200px) {
  /* ... */
}

Also applies to: 1024-1200, 1200-9999

🧰 Tools

🪛 Biome

[error] 15-15: Unexpected shorthand property background after background-image

(lint/suspicious/noShorthandPropertyOverrides)

---

[error] 15-15: Unexpected shorthand property text-decoration after text-decoration-thickness

(lint/suspicious/noShorthandPropertyOverrides)

---

Line range hint 768-1200: Consider using a CSS preprocessor to reduce code duplication.

There's significant repetition in utility classes across different breakpoints. Using a CSS preprocessor (like SASS/SCSS) with loops and mixins could:

1. Reduce code duplication
2. Make maintenance easier
3. Minimize the chance of errors

Example SCSS implementation:

$breakpoints: (
  'md': 768px,
  'lg': 1024px,
  'xl': 1200px
);

$sizes: (16, 25, 50, 60, 75, 95, 100, 140, 150, 200, 520, 550);

@each $breakpoint, $value in $breakpoints {
  @media (min-width: $value) {
    @each $size in $sizes {
      .w-#{$breakpoint}-#{$size} {
        width: #{$size}px !important;
      }
      .h-#{$breakpoint}-#{$size} {
        height: #{$size}px !important;
      }
    }
  }
}

🧰 Tools

🪛 Biome

[error] 15-15: Unexpected shorthand property background after background-image

(lint/suspicious/noShorthandPropertyOverrides)

---

[error] 15-15: Unexpected shorthand property text-decoration after text-decoration-thickness

(lint/suspicious/noShorthandPropertyOverrides)

---

Line range hint 375-768: Standardize responsive design approach.

The responsive design implementation mixes different approaches:

1. Some media queries use max-width while others use min-width
2. Mobile-first approach is not consistently followed

Consider adopting a consistent mobile-first approach:

/* Base styles (mobile) */
.wp-block-gb-goonj-blocks {
  width: 90%;
  gap: 5px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Tablet and up */
@media (min-width: 768px) {
  .wp-block-gb-goonj-blocks {
    width: auto;
    gap: normal;
    justify-content: flex-start;
    flex-wrap: nowrap;
  }
}

🧰 Tools

🪛 Biome

[error] 15-15: Unexpected shorthand property background after background-image

(lint/suspicious/noShorthandPropertyOverrides)

---

[error] 15-15: Unexpected shorthand property text-decoration after text-decoration-thickness

(lint/suspicious/noShorthandPropertyOverrides)

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between efeb131 and 5ab4371.

📒 Files selected for processing (2)

• wp-content/themes/goonj-crm/assets/styles/contribution.scss (4 hunks)
• wp-content/themes/goonj-crm/style.css (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• wp-content/themes/goonj-crm/assets/styles/contribution.scss

🧰 Additional context used

🪛 Biome

wp-content/themes/goonj-crm/style.css

[error] 15-15: Unexpected shorthand property background after background-image

(lint/suspicious/noShorthandPropertyOverrides)

---

[error] 15-15: Unexpected shorthand property text-decoration after text-decoration-thickness

(lint/suspicious/noShorthandPropertyOverrides)

🔇 Additional comments (1)

wp-content/themes/goonj-crm/style.css (1)

15-15: Property override issues were previously identified.

A previous review comment has already addressed the CSS property override issues with shorthand properties.

🧰 Tools

🪛 Biome

[error] 15-15: Unexpected shorthand property background after background-image

(lint/suspicious/noShorthandPropertyOverrides)

---

[error] 15-15: Unexpected shorthand property text-decoration after text-decoration-thickness

(lint/suspicious/noShorthandPropertyOverrides)

[coderabbitai]

Actionable comments posted: 1

🧹 Outside diff range and nitpick comments (2)

wp-content/themes/goonj-crm/style.css (2)

15-15: Avoid excessive use of !important declarations

The CSS contains numerous !important declarations, which can lead to specificity issues and make it challenging to override styles when necessary. Consider refactoring the styles to reduce the use of !important by increasing selector specificity or restructuring the CSS rules.

🧰 Tools

🪛 Biome

[error] 15-15: Unexpected shorthand property background after background-image

(lint/suspicious/noShorthandPropertyOverrides)

---

[error] 15-15: Unexpected shorthand property text-decoration after text-decoration-thickness

(lint/suspicious/noShorthandPropertyOverrides)

---

15-15: Consolidate repetitive utility classes to reduce duplication

There are many utility classes defined for widths, heights, margins, paddings, etc., with different values (e.g., .w-16, .w-25, .h-16, .h-25, etc.). This leads to code duplication and increases maintenance effort. Consider using a CSS preprocessor like SASS or LESS to generate these classes dynamically, or utilize CSS custom properties (variables) to streamline your styles.

🧰 Tools

🪛 Biome

[error] 15-15: Unexpected shorthand property background after background-image

(lint/suspicious/noShorthandPropertyOverrides)

---

[error] 15-15: Unexpected shorthand property text-decoration after text-decoration-thickness

(lint/suspicious/noShorthandPropertyOverrides)

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between 5ab4371 and 4f4e7d2.

📒 Files selected for processing (3)

• wp-content/plugins/civicrm/civicrm/templates/CRM/Contribute/Form/Contribution/ThankYou.tpl (1 hunks)
• wp-content/themes/goonj-crm/assets/styles/contribution.scss (5 hunks)
• wp-content/themes/goonj-crm/style.css (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• wp-content/themes/goonj-crm/assets/styles/contribution.scss

🧰 Additional context used

🪛 Biome

wp-content/themes/goonj-crm/style.css

[error] 15-15: Unexpected shorthand property background after background-image

(lint/suspicious/noShorthandPropertyOverrides)

---

[error] 15-15: Unexpected shorthand property text-decoration after text-decoration-thickness

(lint/suspicious/noShorthandPropertyOverrides)

🔇 Additional comments (1)

wp-content/plugins/civicrm/civicrm/templates/CRM/Contribute/Form/Contribution/ThankYou.tpl (1)

101-101: LGTM! Clean fix for the amount display.

The conditional check {if $amount_level} before displaying the separator – is a good improvement. This prevents displaying a dangling separator when there's no amount level to show.

[coderabbitai]

⚠️ Potential issue

Improve code readability by formatting the CSS code

The CSS code starting from line 15 is minified or concatenated into a single line, which makes it very difficult to read and maintain. Please format the CSS with proper indentation and line breaks to enhance readability and facilitate future modifications.

🧰 Tools

🪛 Biome

[error] 15-15: Unexpected shorthand property background after background-image

(lint/suspicious/noShorthandPropertyOverrides)

---

[error] 15-15: Unexpected shorthand property text-decoration after text-decoration-thickness

(lint/suspicious/noShorthandPropertyOverrides)

[tarunnjoshi]

Merging as changes on previous CSS and change the naming convention