/**
 * Payment page - form styling.
 *
 * Consolidated from four places that were all styling this one form:
 *   - style.css, which shipped ~165 lines of payment CSS on every page
 *   - Fluent Forms > Form #3 > Custom CSS
 *   - the #guru-section-1 / #guru-section-2 wrappers that
 *     guru_plata_form_sections() used to build in JavaScript after load
 *   - leftover #fluentform_4 coupon rules printed by functions.php
 *
 * Enqueued by guru_plata_styles() on the RO payment page (1716, form #3) and
 * the FR one (2798, form #4). The panel rules below key off the classes set on
 * the RO form's field groups; the FR form does not carry them yet, so it picks
 * up only the shared rules (payment box, country select, errors, submit).
 *
 * GuruMedia - https://gurumedia.ro
 */

/* ==========================================================================
   Field-group panels

   These replace the two wrappers the old JavaScript injected. Backgrounds sit
   on each member of a run rather than on a wrapper, so the members must not
   carry a bottom margin - a gap would let the page background show through
   the panel.
   ========================================================================== */

/* --- Personal details --- */
.form-prezenta,
.form-nume,
.form-contact {
  background: #F9F8F6;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  margin-bottom: 0;
}

.form-prezenta {
  padding-top: 1.25rem;
  border-radius: 6px 6px 0 0;
}

.form-contact {
  padding-bottom: 1.25rem;
  border-radius: 0 0 6px 6px;
  margin-bottom: 1rem;
}

/* --- Billing --- */
.title-facturare,
.form-adresa,
.form-locatie,
.form-select-firma,
.form-detalii-firma {
  background: #F5F4F2;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  margin-bottom: 0;
}

.title-facturare {
  padding-top: 1.25rem;
  border-radius: 6px 6px 0 0;
}

/*
 * This one is also an .ff-el-group, and Fluent Forms sets a 20px bottom margin
 * on those from `.fluentform .ff-el-group` - two classes deep, so it outranks a
 * bare .title-facturare. Matching that specificity keeps the heading joined to
 * the fields below instead of floating in its own block.
 */
.fluentform .title-facturare {
  margin-bottom: 0;
  padding-bottom: 0;
}

/*
 * The rule under the heading. It goes on the inner title rather than the
 * group's ::after, because Fluent Forms already uses that pseudo-element as a
 * clearfix and the two collide.
 */
.title-facturare .ff-el-section-title {
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.form-adresa { padding-top: 1rem; }

/*
 * The company-details group is conditional. When it is showing it closes the
 * panel; when Fluent Forms excludes it (.ff_excluded), the select above has
 * to close the panel instead, or the last field sits flush against the edge.
 */
.form-detalii-firma {
  padding-top: 1rem;
  padding-bottom: 1.25rem;
  border-radius: 0 0 6px 6px;
  margin-bottom: 1rem;
}

/* Another .ff-el-group carrying Fluent Forms' 20px bottom margin - it has to
   go, or a white band opens up whenever the company fields are showing. */
.fluentform .form-select-firma {
  margin-bottom: 0;
}

.fluentform .form-select-firma:has(+ .form-detalii-firma.ff_excluded) {
  padding-bottom: 1.25rem;
  border-radius: 0 0 6px 6px;
  margin-bottom: 1rem;
}

/* ==========================================================================
   Payment box - price, Stripe card field
   ========================================================================== */

.payment-box {
  background: #F1F0ED;
  border: none;
  border-radius: 6px;
  padding: 1.5rem;
  margin-top: 1rem;
  position: relative;
  overflow: hidden;
}

/*
 * Decorative corner circles. They are absolutely positioned, so without an
 * explicit order they paint above the box's in-flow content - which showed up
 * as soon as something inside had a background of its own to sit against.
 * Pinning them to z-index 0 and lifting the content to 1 keeps them behind.
 */
.payment-box::before,
.payment-box::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.payment-box > * {
  position: relative;
  z-index: 1;
}

.payment-box::before {
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  background: rgba(255, 255, 255, 0.3);
}

.payment-box::after {
  top: 20px;
  right: 40px;
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.2);
}

/*
 * Price row. Keyed on .payment_total, not :first-child - the original CSS used
 * the positional selector and it broke the moment a group was added above the
 * price: the new element inherited the divider and spacing while the price row
 * silently lost them.
 */
.payment-box .payment_total {
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  margin-bottom: 1.25rem;
}

/*
 * !important again for the Element Pack widget rule
 * `.elementor-1716 .elementor-element-eb9d7b1 .bdt-fluent-forms .ff-el-group
 * label`, which sets font-size and colour on every label in the form at a
 * specificity no sane selector here can reach. This had been losing quietly
 * for a while - the price and Stripe labels were rendering at the widget's
 * 16px body style rather than the small caps intended here.
 */
.payment-box .payment_total .ff-el-input--label label,
.payment-box .ff-el-input--label label[for*="stripe"] {
  font-size: 11px !important;
  font-weight: 500;
  color: #8a7f72 !important;
}

.payment-box .payment_total .ff-el-input--label label {
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* --- Student-discount notice ---------------------------------------------- */

.notice_studenti {
  padding: 11px 14px;
  margin-bottom: 1.25rem;
  background: rgba(248, 168, 23, 0.09);
  border-left: 3px solid #F8A817;
  border-radius: 4px;
}

.notice_studenti p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #6b6053;
}

.payment-box .ff_item_price_wrapper {
  font-size: 26px;
  font-weight: 600;
  display: block;
  margin-top: 2px;
}

.payment-box .ff_item_price_wrapper,
.payment-box .ff_item_price_wrapper *,
.payment-box .ff_product_price {
  color: #1a2e5a;
}

.payment-box .ff_stripe_card_element {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  padding: 11px 14px;
  background: #fff;
  min-height: 44px;
  box-shadow: none;
  font-size: 16px !important;
}

.payment-box .stripe-inline-wrapper { padding-bottom: 0; }

.payment-box .stripe-inline-wrapper > span {
  font-size: 11px;
  color: #a89e93;
  display: block;
  margin-top: 6px;
}

.payment-box .ff-el-group:last-of-type { margin-bottom: 0; }

/* ==========================================================================
   Country select (Choices.js)
   ========================================================================== */

.country-container .choices__inner {
  height: 46px !important;
  min-height: 46px !important;
  padding: 11px 15px !important;
  font-size: 17px !important;
  background: #fff !important;
  border: 0.8px solid rgb(228, 225, 225) !important;
  border-radius: 4px !important;
  display: flex !important;
  align-items: center !important;
}

.country-container .choices__list--single {
  padding: 0 !important;
  font-size: 17px !important;
}

.country-container .choices__item {
  font-size: 17px !important;
  color: rgb(96, 98, 102) !important;
}

.country-container .choices__placeholder {
  color: rgb(134, 142, 150) !important;
}

/* ==========================================================================
   Coupon row
   Moved out of Fluent Forms > Form #3 > Custom CSS.
   ========================================================================== */

#fluentform_3 .ff_coupon_responses li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  flex-wrap: nowrap;
}

/* Fluent Forms' own dismiss control - replaced by the link below. */
#fluentform_3 .ff_coupon_responses .error-clear { display: none !important; }

#fluentform_3 .ff_coupon_wrapper.gm-coupon-disabled .ff-el-input--content {
  opacity: 0.5 !important;
  pointer-events: none !important;
}

#fluentform_3 .gm-check-icon {
  color: #28a745;
  font-size: 16px;
  flex-shrink: 0;
}

#fluentform_3 .gm-dezactiveaza {
  margin-left: auto;
  font-size: 13px;
  color: #888;
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
  padding: 8px 0 8px 12px;
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* ==========================================================================
   Errors, checkboxes, submit
   ========================================================================== */

#fluentform_3 .ff_card-errors {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  background: #FEF2F2 !important;
  border: 1px solid #FECACA !important;
  border-radius: 6px !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  color: #991B1B !important;
  line-height: 1.5 !important;
  margin-top: 8px !important;
}

#fluentform_3 .ff_card-errors:empty { display: none !important; }

.fluentform input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  vertical-align: middle !important;
  margin-right: 6px !important;
  flex-shrink: 0 !important;
}

.ff_submit_btn_wrapper { margin-top: 1.5rem; }

/* ==========================================================================
   Mobile

   Fluent Forms drops the column containers from display:flex to display:block
   below 768px. Flex containers do not collapse margins, block ones do - so the
   last field's 20px bottom margin escapes through the panel (which has no
   bottom padding or border to stop it) and opens a white band across the
   background. flow-root gives each panel member its own block formatting
   context, which keeps that margin inside, matching the desktop result.
   ========================================================================== */

@media (max-width: 767px) {
  .form-prezenta,
  .form-nume,
  .form-contact,
  .form-adresa,
  .form-locatie {
    display: flow-root;
  }

  /*
   * The company group needs the visible-state class in the selector. Fluent
   * Forms hides conditional groups with `.fluentform .has-conditions`, and the
   * rule that brings them back - `.ff-t-container.ff_cond_v` - is scoped to
   * min-width:768px, so there is nothing restoring them below that. A bare
   * .form-detalii-firma would lose to the hide rule and do nothing; keying off
   * .ff_cond_v outranks it, and only once Fluent Forms has revealed the group.
   */
  .frm-fluent-form .form-detalii-firma.ff_cond_v {
    display: flow-root;
  }
}
/* ==========================================================================
   "Alege cum participi" - the two options as buttons

   Styled to read as buttons rather than fields: the site's 15px button radius,
   a filled navy state when chosen, and a heavier border - a white box with a
   hairline and a 6px radius is indistinguishable from the inputs beneath it.
   The native radio is kept throughout, sized and given the brand accent.

   The pair is laid out with flex rather than Fluent Forms' ff_list_2col
   inline-blocks, so the two buttons land on exactly the same grid as the name
   and e-mail fields below: 348px each with a 15px gutter.
   ========================================================================== */

.select_participare .ff-el-input--content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

/*
 * Fluent Forms appends its validation message inside .ff-el-input--content,
 * alongside the two options. Left to itself it takes a track of its own and
 * squeezes the buttons from 348px down to 222px, so anything in here that is
 * not one of the options spans the full row underneath them instead.
 */
.select_participare .ff-el-input--content > :not(.ff-el-form-check) {
  grid-column: 1 / -1;
  margin: 0;
}

/* Fluent Forms puts a 16px right gutter on each column via
   `.fluentform .ff-el-group.ff_list_2col .ff-el-form-check` (four classes).
   The flex gap above replaces it, so it has to be matched selector-for-selector
   to clear - otherwise the buttons come out 16px narrower than the fields. */
.fluentform .ff-el-group.ff_list_2col.select_participare .ff-el-form-check {
  width: auto;
  min-width: 0;
  padding: 0;
  margin: 0;
}

.select_participare .ff-el-form-check-label {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  margin: 0;
  padding: 15px 18px;
  background: #fff;
  border: 1.5px solid rgba(34, 58, 123, 0.22);
  border-radius: 15px;
  box-shadow: 0 1px 2px rgba(23, 32, 60, 0.06);
  font-size: 15px;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, color .18s ease;
}

.select_participare .ff-el-form-check-label:hover {
  border-color: rgba(34, 58, 123, 0.5);
  box-shadow: 0 3px 10px rgba(23, 32, 60, 0.1);
}

.select_participare .ff-el-form-check-input {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 0;
  flex: none;
  accent-color: #223A7B;
}

/* Chosen: filled navy, the same language as the site's primary buttons. */
.select_participare .ff-el-form-check:has(input:checked) .ff-el-form-check-label {
  background: #223A7B;
  border-color: #223A7B;
  box-shadow: 0 4px 14px rgba(34, 58, 123, 0.28);
}

.select_participare .ff-el-form-check:has(input:checked) .ff-el-form-check-input {
  accent-color: #ffffff;
}

/*
 * Colour and weight need !important. The Element Pack widget writes
 * `.elementor-1716 .elementor-element-eb9d7b1 .bdt-fluent-forms .ff-el-group
 * label { color; font-weight }` into the page stylesheet from its own UI, and
 * that outranks anything reasonable this file can spell. An ID would win but
 * would tie these rules to form #3 - !important keeps them portable to the FR
 * form, whose widget emits the same rule under a different element id.
 */
.select_participare .ff-el-form-check-label,
.select_participare .ff-el-form-check-label span {
  color: #223A7B !important;
  font-weight: 500 !important;
}

.select_participare .ff-el-form-check:has(input:checked) .ff-el-form-check-label,
.select_participare .ff-el-form-check:has(input:checked) .ff-el-form-check-label span {
  color: #ffffff !important;
  font-weight: 600 !important;
}

.select_participare .ff-el-form-check-label:focus-within {
  outline: 2px solid #62A545;
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .select_participare .ff-el-input--content {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .select_participare .ff-el-form-check-label { transition: none; }
}