/**
 * GoldSeal Management — global front-end styles.
 *
 * Loaded on every front-end page via GSM_Assets (handle: gsm-global).
 * Site-wide custom CSS belongs here. Prefer Oxygen's variables panel for
 * design tokens; use this file for rules that are awkward to express in
 * the builder or that need to apply globally regardless of template.
 */

/* Example design tokens — define once, reference throughout.
:root {
	--gsm-color-accent: #c8a24b;
	--gsm-space-base: 1rem;
}
*/

/* Add global styles below. */

/* Split text into gold color code start */
h1 span,
h2 span,
h3 span {
	color: var(--gold, #C9921F);
}
/* Split text into gold color code end */


/* Apartment Card */
.gs-apt-card {
  width: 100%;
}

.gs-apt-amenities-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  width: 100%;
  padding: 0 !important;
}

/* Arrow rotation */
.gs-apt-amenities-trigger .bde-button__button::after {
  transition: transform 0.3s ease;
  display: inline-block;
}

.gs-apt-amenities-trigger.is-open .bde-button__button::after {
  transform: rotate(180deg);
}

/* Our Properties per-city grouping, grid, and Load More styling now live in the
   Property Loop element (elements/PropertyLoop/default.css + css.twig), so the
   Load More button is stylable from the element's Design tab. Removed the old
   unlayered rules here — they beat the element's layered CSS and blocked the
   design-control overrides. */

/* Hide GoDaddy's "Live Site" admin-bar item (node id: gdl-live-site) — it
   overlaps the Oxygen-built header for logged-in users. */
#wp-admin-bar-gdl-live-site {
	display: none !important;
}

/* Floor plan: the native Gallery element (add class `gsm-fp-gallery`) is hidden
   off-screen but kept functional, so Oxygen's lightbox still initializes and the
   images stay clickable. The "Floor plan" button opens it via
   floorplan-lightbox.js. Do NOT use display:none / Oxygen's hide — that breaks
   the lightbox. (In the builder canvas it's off-screen too; select it via the
   Structure panel to bind its source.) */
.gsm-fp-gallery {
	position: absolute !important;
	left: -99999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* Fluent Forms selects — room on the right for the dropdown arrow.
   Covers every Fluent Forms select: Property of Interest on the contact form,
   and Apartment on the property enquiry form.

   Two rules in Oxygen's global CSS set the padding on these fields, both with
   !important:
     input[type=text],...,select,textarea,.ff-el-form-control  padding: 14px 16px   (site-wide)
     .gs-contact-us-form-inner .ff-el-form-control             padding: 13px 16px   (contact page)
   The browser draws the native arrow over that right padding, so it ends up
   against the border. We drop the native arrow and paint our own chevron, which
   puts the spacing under our control. Same chevron as the property filter bar
   (PropertySearchBar/default.css).

   The second selector exists only to outrank the contact-page rule. That rule is
   (0,2,0); a plain select.ff-el-form-control is (0,1,1) and would lose to it.

   A third Oxygen rule, on bare `select`, already swaps the native arrow for a
   filled triangle and marks every declaration !important:
     select { appearance:none!important; background-image:url(<triangle>)!important;
              background-position:right 16px center!important; padding-right:40px!important }
   An !important declaration beats a non-important one at any specificity, so
   every background property below needs !important too. Without it that triangle
   keeps winning and this chevron never renders.

   Longhand background properties only. The `background` shorthand would reset
   the background-color those same Oxygen rules set. */
select.ff-el-form-control,
.gs-contact-us-form-inner select.ff-el-form-control {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	/* Match the height of the text inputs beside it. Both get the same padding,
	   border and line-height, but Chrome enforces a minimum inner height on a
	   text input while letting a select collapse to the literal line-height. The
	   select came out 2.5px short on the contact form and 4.5px short on the
	   enquiry form. `normal` is derived from the font, so the two keep matching
	   if the font-size changes. Measured after this: both 44.5px on the contact
	   form, both 49.5px on the enquiry form. */
	line-height: normal !important;
	padding-right: 44px !important;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='8'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M1%201l5%205%205-5'%20fill='none'%20stroke='%23333333'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	/* `center` rather than a fixed top offset: the two forms use different font
	   sizes, so their fields differ in height. On the contact form centre lands
	   at 18.25px, which is the 18px that looked right there by eye. */
	background-position: right 16px center !important;
}

/* Property enquiry form: the `notify_email` field only carries the assigned
   agent's email (prefilled by property-apply.js) so Fluent Forms can route the
   notification to it — Fluent Forms won't let a hidden-type field be the "To",
   so it's a normal email field with the container class `.notify-email`. Hide it
   from view entirely; a display:none input still submits its value. */
.ff-el-group.notify-email,
.notify-email {
	display: none !important;
}