/*--------------------------------------------------------------
This is your custom stylesheet.

Add your own styles here to make theme updates easier.
To override any styles from other stylesheets, simply copy them into here and edit away.

Make sure to respect the media queries! Otherwise you may
accidentally add desktop styles to the mobile layout.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
--------------------------------------------------------------*/

/* Related Articles: clamp title to 2 lines and excerpt to 4 lines so every card stays the same height */
.post-related-posts .entry-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
}

.post-related-posts .entry-content p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0;
}

/* BuddyBoss Membership Pricing Page: the plugin ships with generic Figma-template
   purple (#6c5ce7) because its own "Pro Mode"/ReadyLaunch templates are disabled
   site-wide (login/account/checkout/thankyou/pricing) in favor of Platform/Theme
   styling the pages. These overrides bring it in line with the Maghreb Now brand
   palette (pulled directly from buddyboss_theme_options): primary green #067F38
   with exact hover #044E23, red accent #C8102E, and the theme's real secondary-
   button pattern (#F2F4F5 default -> #067F38 hover), instead of an earlier
   approximate hover green and a white/outline pattern the theme doesn't use.
   Border-radius is unified to 5px everywhere (buddyboss_theme_options.
   button_default_radius = "5"), replacing the plugin's mismatched defaults
   (12px cards / 8px buttons / 20px pill badge) that isma flagged as asymmetric
   with the rest of the theme. */
.bbms-pricing-page button.bbms-pricing-tab.bbms-pricing-tab--active {
	color: #067F38 !important;
	border-bottom-color: #067F38 !important;
}

.bbms-pricing-card {
	border-radius: 5px;
}

.bbms-pricing-card--highlighted {
	border-color: #067F38;
	box-shadow: 0 4px 24px rgba(6, 127, 56, 0.15);
}

.bbms-pricing-card--highlighted .bbms-pricing-check {
	color: #067F38;
}

.bbms-pricing-badge {
	background: #F7DEDE;
	color: #C8102E;
	border-radius: 5px;
}

.bbms-pricing-btn {
	border-radius: 5px;
}

.bbms-pricing-btn--primary {
	background: #067F38;
	border-color: #067F38;
}

.bbms-pricing-btn--primary:hover {
	background: #044E23;
	border-color: #044E23;
}

.bbms-pricing-btn--outline {
	background: #F2F4F5;
	color: #067F38;
	border-color: #F2F4F5;
}

.bbms-pricing-btn--outline:hover {
	background: #067F38;
	color: #fff;
	border-color: #067F38;
}

.bbms-pricing-footer {
	border-radius: 5px;
}


/* mn-profile-cover-boxed (tarea #43, 23/09/2026)
   El perfil usa ancho de portada "Full Width" (BuddyBoss > Ajustes > Perfiles) porque es
   el modo en que el tema pinta las 2 barras laterales DENTRO del bloque del feed y a su
   misma altura. Pero ese modo estira la portada a 100vw. Aqui la devolvemos a la tarjeta
   del perfil: mismo ancho que #cover-image-container (compensando su padding lateral,
   30px en escritorio y 20px por debajo de 782px, igual que el tema) y esquinas superiores
   redondeadas con el radio del tema. */
body.bp-user #buddypress #item-header #header-cover-image.width-full {
	width: calc(100% + 60px);
	left: auto;
	right: auto;
	margin-left: -30px;
	margin-right: -30px;
	border-radius: var(--bb-block-radius) var(--bb-block-radius) 0 0;
	overflow: hidden;
}

body.bp-user #item-header #header-cover-image.width-full a.link-change-cover-image,
body.bp-user #item-header #header-cover-image.width-full .position-change-cover-image {
	left: 20px;
}

@media screen and (max-width: 782px) {
	body.bp-user #buddypress #item-header #header-cover-image.width-full {
		width: calc(100% + 40px);
		margin-left: -20px;
		margin-right: -20px;
	}
}

/* mn-profile-top-gap (tarea #43, 23/09/2026)
   El tema sube la tarjeta del perfil con margin-top:-31px y la deja pegada al borde del
   menu principal. Se anula para que quede el mismo hueco que en el News Feed: los 30px
   del padding-top de #primary, igual en escritorio, tablet y movil. */
body.bp-user #buddypress #item-header #cover-image-container {
	margin-top: 0;
}


/* mn-fluentforms-buddyboss (23/09/2026)
   Fluent Forms, aligned with the BuddyBoss design system. Applies to every Fluent Form.
   1) Fluent Forms reads its colours and sizes from its own --fluentform-* variables (defaults:
      blue #1a7efb, red #f56c6c, 7px radius, grey #dadbdd). Pointing them at the --bb-* theme
      variables makes asterisks, errors, help text, focus and choice buttons follow BuddyBoss
      Colors / Theme Options automatically.
   2) --fluentform-input-select-height: BuddyBoss sizes fields with a fixed 41px height (no vertical
      padding); Fluent Forms' default "auto" made dropdowns collapse to ~21px.
   3) The submit button colours set per form in the Fluent Forms editor (#006233 / #003e20) are
      overridden with the theme's primary button tokens, so every form button matches the site.
      Width (full width) is still controlled from the form editor. */
.fluentform,
.frm-fluent-form {
	--fluentform-primary: var(--bb-primary-color);
	--fluentform-secondary: var(--bb-body-text-color);
	--fluentform-danger: var(--bb-danger-color);
	--fluentform-border-color: var(--bb-content-border-color);
	--fluentform-border-radius: var(--bb-input-radius);
	--fluentform-input-select-height: 41px;
}

/* Submit button = BuddyBoss primary button (normal / hover / focus / active) */
.fluentform form.frm-fluent-form .ff-btn-submit,
.fluentform form.frm-fluent-form .ff-btn-submit.wpf_has_custom_css {
	background-color: var(--bb-primary-button-background-regular);
	border-color: var(--bb-primary-button-border-regular);
	color: var(--bb-primary-button-text-regular);
	border-radius: var(--bb-button-radius);
	opacity: 1;
}
.fluentform form.frm-fluent-form .ff-btn-submit:hover,
.fluentform form.frm-fluent-form .ff-btn-submit.wpf_has_custom_css:hover,
.fluentform form.frm-fluent-form .ff-btn-submit:active,
.fluentform form.frm-fluent-form .ff-btn-submit.wpf_has_custom_css:active {
	background-color: var(--bb-primary-button-background-hover);
	border-color: var(--bb-primary-button-border-hover);
	color: var(--bb-primary-button-text-hover);
}
.fluentform form.frm-fluent-form .ff-btn-submit:focus-visible {
	outline: none;
	box-shadow: var(--bb-primary-button-focus-shadow);
}
.fluentform form.frm-fluent-form .ff-btn-submit:disabled,
.fluentform form.frm-fluent-form.ff_submitting .ff-btn-submit {
	opacity: .6;
	cursor: default;
}

/* Errors: same red and weight BuddyBoss uses for its form notices */
.fluentform .ff-el-is-error .text-danger,
.fluentform .error.text-danger {
	font-size: 13px;
	line-height: 1.4;
	margin-top: 6px;
}
.fluentform .ff-el-is-error .ff-el-form-control:focus {
	box-shadow: 0 0 0 2px rgba(var(--bb-danger-color-rgb), .1);
}

/* Help text: BuddyBoss does not italicise helper text */
.fluentform .ff-el-help-message {
	font-style: normal;
	font-size: 13px;
	color: var(--bb-alternate-text-color);
}

/* Read-only fields use the theme's alternate background */
.fluentform .ff-el-group .ff-read-only {
	background-color: var(--bb-content-alternate-background-color) !important;
}

/* Native checkboxes / radios take the brand colour */
.fluentform .ff-el-form-check-input {
	accent-color: var(--bb-primary-color);
	width: 18px;
	height: 18px;
}

/* "Button" style choices (radio/checkbox as buttons): theme colours instead of Fluent blue */
.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check label > span {
	border-color: var(--bb-content-border-color);
	color: var(--bb-headings-color);
	border-radius: var(--bb-button-radius) !important;
}
.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check label > span:hover {
	color: var(--bb-primary-color);
}
.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check.ff_item_selected label > span {
	background-color: var(--bb-primary-color);
	border-color: var(--bb-primary-color);
	box-shadow: none;
	color: #fff;
}
.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check.ff-el-image-holder.ff_item_selected {
	border-color: var(--bb-primary-color);
}

/* Confirmation message after submitting: BuddyBoss-style success notice */
.ff-message-success {
	margin-top: 10px;
	padding: 16px 20px;
	border: 1px solid rgba(var(--bb-success-color-rgb), .35);
	border-left: 4px solid var(--bb-success-color);
	border-radius: var(--bb-block-radius);
	background: rgba(var(--bb-success-color-rgb), .06);
	box-shadow: none;
	color: var(--bb-headings-color);
}
.ff-message-success p:last-child {
	margin-bottom: 0;
}

/* mn-ff-name-align (24/09/2026)
   Name / address fields sit side by side in .ff-t-cell columns. Fluent Forms bottom-aligns each
   column (justify-content: flex-end) so inputs line up when labels have different heights. But when
   one sub-field is required and the other is not, the inline error ("This field is required") makes
   only that column taller, and flex-end pushes the OTHER input down (24px offset on /contact-us/).
   Top-aligning keeps both inputs level with or without errors; our labels are always one line. */
.frm-fluent-form .ff-name-field-wrapper .ff-t-cell,
.frm-fluent-form .ff-name-address-wrapper .ff-t-cell {
	justify-content: flex-start;
}

/* mn-footer-socials v3 (24-sep-2026): the icon itself becomes the square.
   bb-icons ships the same brand glyphs in 6 weights (100 round-lined, 200 round-filled = theme
   default, 300 filled, 400 lined, 500 box-lined, 600 box-filled). font-weight:600 swaps the
   circle for the filled square; no extra background. Size and spacing stay close to the theme
   (theme: 24px icon, 6px margin); the square reads bigger than the circle, so 22px / 4px.
   Red by default, green on hover/focus. Links: Theme Options > Footer. */
.bb-footer .footer-socials a {
	margin: 4px;
	color: var(--bb-label-text-color, #C8102E);
	transition: color .2s ease;
}
.bb-footer .footer-socials i {
	font-size: 22px;
	font-weight: 600; /* box-filled */
}
.bb-footer .footer-socials a:hover,
.bb-footer .footer-socials a:focus-visible { color: var(--bb-primary-color, #067F38); }
.bb-footer .footer-socials a:focus-visible { outline: 2px solid var(--bb-primary-color, #067F38); outline-offset: 2px; border-radius: 4px; }