/* ================================================================
   overrides.css — deliberately UNLAYERED (component-inventory §9 rule 3)

   Purpose: corrections against plugin stylesheets that cannot be
   dequeued (unlayered plugin CSS beats all @layer rules, so fixes
   against it must be unlayered too and loaded after the plugin CSS).

   Keep this file TINY. Every rule must carry a comment naming the
   plugin + the reason. No @media here either — if a correction needs
   a media query, reconsider whether the plugin CSS can be dequeued.
   ================================================================ */

/* Fluent Forms — submit button inline-style guard.
   Unless a form's button_style is 'no_style', FF prints an inline
   <style> (unlayered, in <body>, after this file):
     form.fluent_form_N .ff-btn-submit:not(.ff_btn_no_style)
       { background-color: var(--fluentform-primary); color: #ffffff; }
   With FF's stylesheets dequeued the var is undefined → transparent
   pill + white-on-white text. Our forms are set to 'no_style' (no
   inline style emitted), but if one is ever flipped back in the FF
   admin UI this rule outranks FF's: (0,4,1) beats (0,3,1), so source
   order no longer matters. Colors mirror the integrations-layer skin. */
form.frm-fluent-form .ff_submit_btn_wrapper .ff-btn-submit:not(.ff_btn_no_style) {
  background-color: var(--color-yellow);
  color: var(--color-dark);
}
form.frm-fluent-form .ff_submit_btn_wrapper .ff-btn-submit:not(.ff_btn_no_style):hover {
  background-color: var(--color-orange);
  color: #fff;
}

/* ================================================================
   WooCommerce checkout (kassa) — unlayered corrections.
   Woo's frontend CSS is unlayered, so it beats the theme's @layer
   integrations rules regardless of specificity (that's why the earlier
   layered attempt didn't apply). These win via source order + higher
   specificity. Elements below all carry Woo's OWN classes; our custom
   markup (delivery cards, summary) is styled in theme.css @layer pages.
   ================================================================ */

/* Woo prints a "Billing details" <h3> inside the billing fieldset — the
   block already reads "Kontakt", so drop it. */
.woocommerce-checkout .woocommerce-billing-fields > h3 { display: none; }

/* Kontakt inputs → rounded prototype field (beats .woocommerce form .form-row input.input-text). */
.woocommerce-checkout .kassa-block .form-row input.input-text,
.woocommerce-checkout .kassa-block .form-row .select2-selection,
.woocommerce-checkout .kassa-block .form-row textarea {
  width: 100%; padding: 0.8rem 1rem; border: 1.5px solid rgba(28,28,28,0.15);
  border-radius: 12px; font: inherit; background: #fff; color: var(--color-dark);
  box-shadow: none; line-height: 1.4;
}
.woocommerce-checkout .kassa-block .form-row input.input-text:focus {
  outline: none; border-color: var(--color-orange); box-shadow: 0 0 0 3px rgba(255,101,0,0.12);
}
.woocommerce-checkout .kassa-block .form-row > label { font-size: 0.82rem; font-weight: 600; color: var(--color-dark); margin-bottom: 0.35rem; display: block; }

/* Stripe payment element container. */
.woocommerce-checkout .kassa-block .wc_payment_methods { list-style: none; margin: 0; padding: 0; border: 0; }
/* "Pangakaart" method heading — Woo renders it tiny; make it a readable sub-label. */
.woocommerce-checkout .kassa-block .wc_payment_method > label {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--color-dark) !important;
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin: 0.2rem 0 0.6rem !important;
}
.woocommerce-checkout .kassa-block .wc_payment_method > label img { max-height: 24px; width: auto; }
/* No outer frame around the Stripe Payment Element — it already renders its own
   clean fields (via the Appearance API). The old grey box + border double-framed
   the iframe and looked cluttered. Keep it flush on the block background. */
.woocommerce-checkout .kassa-block .payment_box {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0.6rem 0 0 !important;
  box-shadow: none !important;
}
.woocommerce-checkout .kassa-block .payment_box::before { display: none !important; }
/* strip stray frames from Stripe's own wrappers too */
.woocommerce-checkout .kassa-block .wc-stripe-upe-element,
.woocommerce-checkout .kassa-block #wc-stripe-upe-element,
.woocommerce-checkout .kassa-block li.wc_payment_method,
.woocommerce-checkout .kassa-block .payment_method_stripe {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Terms checkbox → .consent look. */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { margin-top: 1.2rem; }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.9rem; color: #555; }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input[type=checkbox] { accent-color: var(--color-orange); margin: 0.15rem 0 0; flex: 0 0 auto; }
.woocommerce-checkout .woocommerce-privacy-policy-text { font-size: 0.85rem; color: #8a8a8a; margin-top: 1rem; }

/* Place-order → brand gradient pill (ID beats Woo's .button.alt). */
.woocommerce-checkout #place_order {
  display: block; width: 100%; margin-top: 1.2rem; cursor: pointer;
  padding: 1rem 1.5rem; border: none; border-radius: 999px;
  font: inherit; font-weight: 700; color: var(--color-dark); text-shadow: none;
  background: linear-gradient(100deg, #FFB904, #FF6500);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease;
}
.woocommerce-checkout #place_order:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(255,101,0,0.5); background: linear-gradient(100deg, #FFB904, #FF6500); }

/* Woo error/notice inside checkout → brand-styled. */
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-NoticeGroup ul.woocommerce-error {
  list-style: none; margin: 0 0 1rem; padding: 0.9rem 1.2rem; border-radius: 12px;
  background: rgba(248,0,134,0.07); border: 1.5px solid rgba(248,0,134,0.35); color: #C2006B; font-size: 0.92rem;
}

/* WooCommerce notices (removed-item "Undo?", info messages) — Woo defaults to a
   green bar that clashes with the brand. Restyle to a neutral card with a yellow
   accent + orange links. !important on the essentials to beat Woo's unlayered green. */
.woocommerce-message,
.woocommerce-info {
  list-style: none;
  margin: 0 0 0.8rem;
  padding: 0.85rem 1.2rem !important;
  border-radius: 12px !important;
  background: #fff !important;
  border: 1px solid rgba(28,28,28,0.08) !important;
  border-left: 4px solid var(--color-yellow) !important;
  box-shadow: 0 8px 22px -14px rgba(28,28,28,0.12);
  color: var(--color-dark) !important;
  font-size: 0.92rem;
  line-height: 1.5;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
}
.woocommerce-info { border-left-color: var(--color-orange) !important; }
/* kill Woo's coloured ::before check/info glyph */
.woocommerce-message::before,
.woocommerce-info::before { display: none !important; }
/* links + the restore/undo/"view cart" control → orange text, not a green button */
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-message .button,
.woocommerce-info .button {
  color: var(--color-orange) !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  font-weight: 600;
  min-height: 0 !important;
  text-decoration: none;
}
.woocommerce-message a:hover,
.woocommerce-info a:hover { text-decoration: underline; }

/* Strip the nested Woo/Stripe payment-method boxes so the card fields sit clean
   (Edward: "get rid of the border around the form elements"). The inputs keep
   their own borders via the Stripe Appearance API; these wrappers only double-framed. */
.woocommerce-checkout .wc_payment_methods,
.woocommerce-checkout li.wc_payment_method,
.woocommerce-checkout li.payment_method_stripe,
.woocommerce-checkout .wc-upe-form,
.woocommerce-checkout .wc-payment-form,
.woocommerce-checkout .wc-stripe-upe-element {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.woocommerce-checkout .wc_payment_methods { margin: 0 !important; list-style: none !important; }

/* THE lavender box: WooCommerce core sets #payment { background:#ebe9eb; border-radius }
   — the classic grey payment container. Strip it so the Makse section (Apple/GPay,
   card fields, terms, place-order) sits flush on the white kassa-block. */
.woocommerce-checkout #payment,
.woocommerce-checkout .woocommerce-checkout-payment {
  background: transparent !important;
  border-radius: 0 !important;
}
.woocommerce-checkout #payment::before { display: none !important; }

/* WordPress core block library (wp-includes/css/dist/block-library/style.min.css)
   — table cell borders and padding.
   Core ships `.wp-block-table td, .wp-block-table th { border: 1px solid;
   padding: .5em }`. It is UNLAYERED and enqueued after theme.css, so it beats
   the .page-prose table design in @layer components no matter the specificity
   (unlayered always outranks layered). Measured on /muugitingimused/: cells
   computed to 1px borders on all four sides and 6.84px padding instead of the
   intended horizontal-rule-only table.
   Only the two contested properties live here — the rest of the table design
   stays in theme.css #47 page-prose. */
.page-prose .wp-block-table :is(th, td) {
  border: 0;
  border-bottom: 1px solid var(--color-light-3);
  padding: 0.7rem 0.9rem;
}
.page-prose .wp-block-table tbody tr:last-child :is(th, td) { border-bottom: 0; }
