/*
 * PLD canonical button styles.
 *
 * Single source of truth for every button surface on the site, implementing
 * the "05 Buttons" frame of the PLD Brand Guidelines Figma file.
 *
 * Loaded last in the cascade (see header.php) so it wins ties against
 * custom.css, the Customizer CSS, and wp-custom-css.css without !important.
 *
 * Spec summary:
 * - Main buttons: 18px 'Segoe UI' 600, radius 0, padding 25px 14px,
 *   solid brand fill + 4px bottom edge in the darker shade, hover = darker fill.
 *   The edge is an inset box-shadow, not a border, so it adds no height and
 *   solid and outline buttons in the same row come out the same outer size.
 * - Product tab buttons: 14px 'Segoe UI' 600, 2px solid brand border, white bg,
 *   colored text; active/hover = solid fill + white text, active gets a caret.
 * - Compact tier reuses the tab typography for dense commerce UI.
 * - Disabled: flat #e7e7e7 fill, #b3b3b3 text, no bottom edge, not-allowed
 *   cursor - same treatment for every variant, solid or outline.
 */

/* Design tokens                                                       */

:root {
  --pld-btn-green: #84a835;
  --pld-btn-green-hover: #5b7b14;
  --pld-btn-green-edge: #6a8c1f;
  --pld-btn-green-dark: #405b06;
  --pld-btn-blue: #009bd8;
  --pld-btn-blue-hover: #136bb4;
  --pld-btn-blue-edge: #1a6ab1;
  --pld-btn-blue-dark: #0e3f6a;
  --pld-btn-orange: #f36f23;
  --pld-btn-orange-hover: #d86f2d;
  --pld-btn-orange-edge: #9b3d02;
  --pld-btn-orange-dark: #9b3d02;
  --pld-btn-purple: #472683;
  --pld-btn-purple-hover: #6f2de2;
  --pld-btn-purple-edge: #2d1653;
  --pld-btn-purple-dark: #2d1653;
  --pld-btn-yellow: #ffd000;
  --pld-btn-yellow-hover: #fae458;
  --pld-btn-yellow-edge: #ebcc00;
  --pld-btn-yellow-dark: #ebcc00;
  --pld-btn-pink: #ea589f;
  --pld-btn-pink-hover: #9c0759;
  --pld-btn-pink-edge: #cd589a;
  --pld-btn-pink-dark: #9c0759;
  --pld-btn-red: #d33b4d;
  --pld-btn-red-hover: #a81f34;
  --pld-btn-red-edge: #851726;
  --pld-btn-text-dark: #19213d;
  --pld-btn-disabled-bg: #e7e7e7;
  --pld-btn-disabled-text: #b3b3b3;
  --pld-btn-font: 'Segoe UI', sans-serif;
}

/* Base rule.
   Every button surface consumes the same per-element custom properties;
   variants and surface aliases below only assign variables. Class/id
   selectors only: bare button/a elements are never styled here so
   LayerSlider, plugin modals and the admin bar are unaffected. */

.pld-button,
.wp-element-button,
.gform_wrapper .gform_button,
.gform_wrapper input[type='submit'],
.gform_wrapper .gform_next_button,
.gform_wrapper .gform_previous_button,
a.button.btn.add_to_cart_button,
button.add-to-cart-qty-btn,
.single_add_to_cart_button,
.singular_add_to_cart_button,
.bundle_add_to_cart_button,
.checkout-button,
#place_order,
.woocommerce-Button.button.btn_login,
.woocommerce-Button.button.btn_register,
.save_account_details_btn,
.add-request-quote-button,
.request-quote-btn,
.request-quote-btn-school,
.ywraq-big-button,
.empty-cart-btn,
.update-cart-btn,
.pld-btn-main,
.myaccount-details-btn,
.dear-pdf-preview,
.btn-preview > button,
.btn-preview > a,
.btn-preview-products > button,
.btn-preview-products > a,
.coupon button[name='apply_coupon'],
.coupon input[name='apply_coupon'],
.wp2fa-wizard-btn,
.filter_apply_btn {
  box-sizing: border-box;
  font-family: var(--pld-btn-font);
  font-size: var(--btn-font-size, 18px);
  font-weight: 600;
  line-height: 1.2;
  text-transform: none;
  padding: var(--btn-pad, 25px 14px);
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 -4px 0 var(--btn-edge, var(--pld-btn-blue-edge));
  background-color: var(--btn-bg, var(--pld-btn-blue));
  color: var(--btn-text, #fff);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.pld-button:hover,
.pld-button:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.wp-element-button:hover,
.wp-element-button:focus,
.gform_wrapper .gform_button:hover,
.gform_wrapper .gform_button:focus,
.gform_wrapper input[type='submit']:hover,
.gform_wrapper input[type='submit']:focus,
.gform_wrapper .gform_next_button:hover,
.gform_wrapper .gform_previous_button:hover,
a.button.btn.add_to_cart_button:hover,
a.button.btn.add_to_cart_button:focus,
a.button.btn.add_to_cart_button:active,
button.add-to-cart-qty-btn:hover,
.single_add_to_cart_button:hover,
.singular_add_to_cart_button:hover,
.bundle_add_to_cart_button:hover,
.checkout-button:hover,
#place_order:hover,
.woocommerce-Button.button.btn_login:hover,
.woocommerce-Button.button.btn_register:hover,
.save_account_details_btn:hover,
.add-request-quote-button:hover,
.request-quote-btn:hover,
.request-quote-btn:focus,
.request-quote-btn-school:hover,
.ywraq-big-button:hover,
.empty-cart-btn:hover,
.update-cart-btn:hover,
.pld-btn-main:hover,
.myaccount-details-btn:hover,
.dear-pdf-preview:hover,
.dear-pdf-preview:focus,
button.dear-pdf-preview:hover,
button.dear-pdf-preview:focus,
a.dear-pdf-preview:hover,
a.dear-pdf-preview:focus,
.btn-preview > button:hover,
.btn-preview > a:hover,
.btn-preview-products > button:hover,
.btn-preview-products > a:hover,
.btn-preview:hover,
.btn-preview:focus-within,
.btn-preview a:hover,
.btn-preview button:hover,
.btn-preview:hover button,
.btn-preview:hover a,
.btn-preview-products:hover,
.btn-preview-products a:hover,
.btn-preview-products:hover a,
.btn-preview-products:focus-within,
.coupon button[name='apply_coupon']:hover,
.coupon input[name='apply_coupon']:hover,
.wp2fa-wizard-btn:hover,
.filter_apply_btn:hover {
  background-color: var(--btn-hover, var(--pld-btn-blue-hover));
  color: var(--btn-text-hover, var(--btn-text, #fff));
}

.pld-button:focus-visible,
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible {
  outline: 2px solid var(--pld-btn-text-dark);
  outline-offset: 2px;
}

/* Disabled state: every button surface drops to a flat grey - disabled
   fill, muted text, no bottom edge - whether disabled via the attribute
   on real buttons or the .disabled class WooCommerce and the quote
   templates toggle on buttons and anchors. Outline buttons keep their
   2px border for geometry but it fades to the fill grey. The :is()
   inherits #place_order's ID specificity, so this single rule also
   outranks every hover and variant rule in this file - no per-state
   duplicates needed. */
:is(
  .pld-button,
  .wp-block-button__link,
  .wp-element-button,
  .gform_wrapper .gform_button,
  .gform_wrapper input[type='submit'],
  .gform_wrapper .gform_next_button,
  .gform_wrapper .gform_previous_button,
  a.button.btn.add_to_cart_button,
  button.add-to-cart-qty-btn,
  .single_add_to_cart_button,
  .singular_add_to_cart_button,
  .bundle_add_to_cart_button,
  .checkout-button,
  #place_order,
  .woocommerce-Button.button.btn_login,
  .woocommerce-Button.button.btn_register,
  .save_account_details_btn,
  .add-request-quote-button,
  .request-quote-btn,
  .request-quote-btn-school,
  .ywraq-big-button,
  .empty-cart-btn,
  .update-cart-btn,
  .pld-btn-main,
  .myaccount-details-btn,
  .dear-pdf-preview,
  .btn-preview > button,
  .btn-preview > a,
  .btn-preview-products > button,
  .btn-preview-products > a,
  .coupon button[name='apply_coupon'],
  .coupon input[name='apply_coupon'],
  .wp2fa-wizard-btn,
  .filter_apply_btn
):is(:disabled, [disabled], .disabled) {
  background-color: var(--pld-btn-disabled-bg);
  border-color: var(--pld-btn-disabled-bg);
  color: var(--pld-btn-disabled-text);
  box-shadow: none;
  cursor: not-allowed;
  /* Several surfaces also carry Bootstrap's .btn, whose disabled rule
     fades to opacity 0.65 - the grey fill is the whole treatment. */
  opacity: 1;
}

/* Color variants                                                      */

.pld-button--green {
  --btn-bg: var(--pld-btn-green);
  --btn-hover: var(--pld-btn-green-hover);
  --btn-edge: var(--pld-btn-green-edge);
}

.pld-button--blue {
  --btn-bg: var(--pld-btn-blue);
  --btn-hover: var(--pld-btn-blue-hover);
  --btn-edge: var(--pld-btn-blue-edge);
}

.pld-button--orange {
  --btn-bg: var(--pld-btn-orange);
  --btn-hover: var(--pld-btn-orange-hover);
  --btn-edge: var(--pld-btn-orange-edge);
}

.pld-button--purple {
  --btn-bg: var(--pld-btn-purple);
  --btn-hover: var(--pld-btn-purple-hover);
  --btn-edge: var(--pld-btn-purple-edge);
}

.pld-button--yellow {
  --btn-bg: var(--pld-btn-yellow);
  --btn-hover: var(--pld-btn-yellow-hover);
  --btn-edge: var(--pld-btn-yellow-edge);
  --btn-text: var(--pld-btn-text-dark);
}

.pld-button--pink {
  --btn-bg: var(--pld-btn-pink);
  --btn-hover: var(--pld-btn-pink-hover);
  --btn-edge: var(--pld-btn-pink-edge);
}

/* Size tiers                                                          */

/* Tab-spec typography for dense commerce UI. */
.pld-button--compact {
  --btn-font-size: 14px;
  --btn-pad: 10px 40px;
}

/* Small utility actions: qty steppers, coupon field, dropdown items. */
.pld-button--utility {
  --btn-font-size: 14px;
  --btn-pad: 6px 14px;
}

/* Editor button blocks sit in prose rather than a commerce row and take
   a squarer, roomier box than the default 25px 14px. */
.wp-block-buttons .wp-block-button__link {
  --btn-pad: 1.5rem;
}

/* Style variants                                                      */

/* Outline (Product Tab spec): white bg, brand border + text; hover and
   .active invert to solid fill with white text. */
.pld-button--outline,
.wp2fa-wizard-btn-secondary {
  background-color: #fff;
  border: 2px solid var(--btn-bg, var(--pld-btn-blue));
  color: var(--btn-bg, var(--pld-btn-blue));
  box-shadow: none;
}

.pld-button--outline:hover,
.pld-button--outline:focus,
.pld-button--outline.active,
.wp2fa-wizard-btn-secondary:hover,
.wp2fa-wizard-btn-secondary:focus {
  background-color: var(--btn-bg, var(--pld-btn-blue));
  color: #fff;
}

/* On same-color backgrounds: darker fill; hover = white bg + colored text. */
.pld-button--on-color {
  --btn-bg: var(--btn-dark, var(--pld-btn-blue-dark));
  --btn-edge: var(--btn-dark, var(--pld-btn-blue-dark));
  --btn-hover: #fff;
  --btn-text-hover: var(--btn-dark, var(--pld-btn-blue-dark));
}

/* Editor palette classes.
   Classic themes must ship the CSS for editor-color-palette slugs
   (see includes/editor/button-guardrails.php). The button variants
   wire the palette classes into the token system so a background
   choice also sets the matching hover and edge shades. */

.has-pld-green-background-color {
  background-color: var(--pld-btn-green);
}

.has-pld-blue-background-color {
  background-color: var(--pld-btn-blue);
}

.has-pld-orange-background-color {
  background-color: var(--pld-btn-orange);
}

.has-pld-purple-background-color {
  background-color: var(--pld-btn-purple);
}

.has-pld-yellow-background-color {
  background-color: var(--pld-btn-yellow);
}

.has-pld-pink-background-color {
  background-color: var(--pld-btn-pink);
}

.has-pld-green-color {
  color: var(--pld-btn-green);
}

.has-pld-blue-color {
  color: var(--pld-btn-blue);
}

.has-pld-orange-color {
  color: var(--pld-btn-orange);
}

.has-pld-purple-color {
  color: var(--pld-btn-purple);
}

.has-pld-yellow-color {
  color: var(--pld-btn-yellow);
}

.has-pld-pink-color {
  color: var(--pld-btn-pink);
}

.wp-block-button__link.has-pld-green-background-color {
  --btn-bg: var(--pld-btn-green);
  --btn-hover: var(--pld-btn-green-hover);
  --btn-edge: var(--pld-btn-green-edge);
}

.wp-block-button__link.has-pld-blue-background-color {
  --btn-bg: var(--pld-btn-blue);
  --btn-hover: var(--pld-btn-blue-hover);
  --btn-edge: var(--pld-btn-blue-edge);
}

.wp-block-button__link.has-pld-orange-background-color {
  --btn-bg: var(--pld-btn-orange);
  --btn-hover: var(--pld-btn-orange-hover);
  --btn-edge: var(--pld-btn-orange-edge);
}

.wp-block-button__link.has-pld-purple-background-color {
  --btn-bg: var(--pld-btn-purple);
  --btn-hover: var(--pld-btn-purple-hover);
  --btn-edge: var(--pld-btn-purple-edge);
}

.wp-block-button__link.has-pld-yellow-background-color {
  --btn-bg: var(--pld-btn-yellow);
  --btn-hover: var(--pld-btn-yellow-hover);
  --btn-edge: var(--pld-btn-yellow-edge);
  --btn-text: var(--pld-btn-text-dark);
}

.wp-block-button__link.has-pld-pink-background-color {
  --btn-bg: var(--pld-btn-pink);
  --btn-hover: var(--pld-btn-pink-hover);
  --btn-edge: var(--pld-btn-pink-edge);
}

/* Legacy WP core preset classes still present in content. Core sets
   background-color from these custom properties with !important, so
   re-pointing the variables on button elements remaps the color
   without fighting specificity. Buttons only; other uses of the
   presets are unaffected. */
.wp-block-button__link.has-vivid-cyan-blue-background-color {
  /* stylelint-disable-next-line custom-property-pattern -- WP core preset name */
  --wp--preset--color--vivid-cyan-blue: var(--pld-btn-blue);
  --btn-hover: var(--pld-btn-blue-hover);
  --btn-edge: var(--pld-btn-blue-edge);
}

.wp-block-button__link.has-luminous-vivid-orange-background-color {
  /* stylelint-disable-next-line custom-property-pattern -- WP core preset name */
  --wp--preset--color--luminous-vivid-orange: var(--pld-btn-orange);
  --btn-hover: var(--pld-btn-orange-hover);
  --btn-edge: var(--pld-btn-orange-edge);
}

/* Surface aliases                                                     */
/* Assign variant tokens to existing markup so the fix applies at      */
/* class level with no template or content renames.                    */

/* Gutenberg buttons default to brand blue (colored ones carry a
   has-*-background-color class or, until migration, an inline style). */

/* Shop grid add to cart: brand green, compact. */
a.button.btn.add_to_cart_button,
button.add-to-cart-qty-btn {
  --btn-bg: var(--pld-btn-green);
  --btn-hover: var(--pld-btn-green-hover);
  --btn-edge: var(--pld-btn-green-edge);
}

ul.products a.button.btn.add_to_cart_button,
button.add-to-cart-qty-btn {
  --btn-font-size: 14px;
  --btn-pad: 10px 14px;
}

/* Single product form: add-to-cart and add-to-quote sit side by side and
   share the same brand-blue treatment and size. A fixed height (border-box,
   so it holds for both the solid and the 2px-bordered outline button) locks
   the pair to the 45px quantity stepper beside them; the shared min-width
   makes them read as an identical pair despite different label lengths. */
.single_add_to_cart_button,
.singular_add_to_cart_button,
.bundle_add_to_cart_button,
.request-quote-btn,
.request-quote-btn-school,
form.cart .add-request-quote-button {
  --btn-font-size: 16px;
  --btn-pad: 0 25px;

  height: 45px;
  min-width: 160px;
  /* Uppercase labels for the product-page CTA row, so "Add to quote"
     matches the add-to-cart button beside it. */
  text-transform: uppercase;
}

/* Anchor-based buttons and cart buttons render consistently: box them
   as flex containers and center their label so a fixed height works the same
   across <button> and <a> elements. */
.single_add_to_cart_button,
.singular_add_to_cart_button,
.bundle_add_to_cart_button,
.request-quote-btn,
.request-quote-btn-school,
.add-request-quote-button,
.empty-cart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

/* Add-to-quote renders solid blue via the shared base rule (the outline
   secondary treatment was dropped), so its over state is the same darkening
   as the primary buttons; the border tracks the background so the anchor
   variants keep no visible stroke. */
.request-quote-btn:hover,
.request-quote-btn:focus,
.request-quote-btn-school:hover,
.add-request-quote-button:hover {
  background-color: var(--btn-hover, var(--pld-btn-blue-hover));
  border-color: var(--btn-hover, var(--pld-btn-blue-hover));
  color: #fff;
}

/* Cart and checkout primary actions: brand green, main tier. */
.checkout-button,
#place_order {
  --btn-bg: var(--pld-btn-green);
  --btn-hover: var(--pld-btn-green-hover);
  --btn-edge: var(--pld-btn-green-edge);
  --btn-font-size: 16px;
  --btn-pad: 12px 25px;
}

/* Cart page empty/update pair: same size with distinct brand treatment.
   Empty Cart is a red destructive action; Update Cart is the blue primary.
   Hover states keep the same color family, just darker. */
.empty-cart-btn,
.update-cart-btn {
  --btn-font-size: 14px;
  --btn-pad: 0 22px;

  height: 40px;
  min-width: 130px;
  vertical-align: middle;
}

.empty-cart-btn {
  --btn-bg: var(--pld-btn-red);
  --btn-hover: var(--pld-btn-red-hover);
  --btn-edge: var(--pld-btn-red-edge);
}

.update-cart-btn {
  --btn-bg: var(--pld-btn-blue);
  --btn-hover: var(--pld-btn-blue-hover);
  --btn-edge: var(--pld-btn-blue-edge);
}

/* Login / register / account forms: brand blue. */
.woocommerce-Button.button.btn_login,
.woocommerce-Button.button.btn_register,
.save_account_details_btn {
  --btn-font-size: 16px;
  --btn-pad: 10px 25px;
}

/* Quote flows elsewhere (wishlist, my-account): brand blue. */
.add-request-quote-button,
.ywraq-big-button {
  --btn-font-size: 16px;
  --btn-pad: 10px 25px;
}

/* On a product page the add-to-quote button sits directly beside add-to-cart,
   and there it has to match: the pairing rule above locks .request-quote-btn,
   .request-quote-btn-school, and form.cart .add-request-quote-button to 45px.
   We also normalize the YITH wrapper (.yith-ywraq-add-to-quote) so it aligns
   cleanly as an inline-flex box beside the cart button with no 1px margin or
   border mismatch from plugin styles. Scoped to form.cart. */
form.cart .yith-ywraq-add-to-quote {
  display: inline-flex !important;
  vertical-align: middle !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* YITH swaps these two with .hide/.show classes plus an inline display, so
   they must not carry a forced display of their own: a !important display
   here outranks both the class rule and the inline style and leaves "Add to
   quote" showing beside "Already in your quote" once the product has been
   added. As children of the inline-flex wrapper above they lay out as flex
   items whatever display they carry, so only the box resets are needed. */
form.cart .yith-ywraq-add-button,
form.cart .yith_ywraq_add_item_response_message {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

form.cart .single_add_to_cart_button,
form.cart .singular_add_to_cart_button,
form.cart .bundle_add_to_cart_button,
form.cart .request-quote-btn,
form.cart .request-quote-btn-school,
form.cart .add-request-quote-button {
  box-sizing: border-box !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border: 0 !important;
  vertical-align: middle !important;
}

form.cart .add-request-quote-button {
  --btn-pad: 0 25px;

  height: 45px;
  min-width: 160px;
}

/* My Account surfaces: compact blue. */
.pld-btn-main,
.myaccount-details-btn {
  --btn-font-size: 14px;
  --btn-pad: 13px 14px;
}

/* Coupon apply buttons on the cart and checkout forms. Replaces the old
   .caupon_btn rules, which targeted a misspelled class nothing emits. */
.coupon button[name='apply_coupon'],
.coupon input[name='apply_coupon'] {
  --btn-font-size: 14px;
  --btn-pad: 8px 14px;
}

/* Video popup buttons (my/popup-button block): full-width block like the
   Gutenberg buttons they sit beside. */
.pld-popup-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
}

/* Product gallery preview button wrappers (.btn-preview and .btn-preview-products).
   The wrapper is a transparent layout container; its inner button or anchor
   takes 100% width and full brand button styling so there is no outer color leak
   or nested box effect. */
.btn-preview,
.btn-preview-products {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin-top: 12px;
  margin-left: 0 !important;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-preview:not(:has(> *)),
.btn-preview-products:not(:has(> *)) {
  display: none !important;
}

/* Every preview control is a direct child of one of the two wrappers above, so
   match on the wrapper rather than on the button's own classes. `.rfbwp-popup-book`
   in particular is NOT safe to match bare: `product-image.php` / `product-simple.php`
   put it on the gallery link via DOMDocument, and `pld-flipbook.js` / `pld-product.js`
   add it to `.gallery__image_first a`, so a bare selector turns the main product
   image into a full-width blue button and the icon rule below shrinks that image
   to 16px. Same for `.hover-hider-active-subsc` and `.dear-pdf-preview-active-subsc`,
   which only ever appear inside these wrappers anyway. */
.btn-preview > button,
.btn-preview > a,
.btn-preview-products > button,
.btn-preview-products > a,
.dear-pdf-preview {
  --btn-font-size: 16px;
  --btn-pad: 12px 14px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-decoration: none;
  box-sizing: border-box;
}

.btn-preview img,
.btn-preview-products img {
  margin-right: 8px !important;
  margin-left: 0 !important;
  width: 16px !important;
  height: 16px !important;
  vertical-align: middle;
}

/* Filter controls: utility blue, squared per spec (was a 20px pill). */
.filter_apply_btn {
  --btn-font-size: 14px;
  --btn-pad: 8px 22px;
}

.filter_btn,
.filter_clear_btn,
.filter_category_btn {
  font-family: var(--pld-btn-font);
  font-size: 14px;
  font-weight: 600;
  border-radius: 0 !important;
}

/* Product variant tabs (Product Tab spec).
   Replaces the custom.css blocks wholesale: same selectors, same
   geometry (width 100%, fixed height, caret on .active) so
   js/pld-product.js needs no change; typography and colors come
   from the spec. */

button.btn.book,
button.btn.ebook,
button.btn.full-kit,
button.btn.upgrade-kit,
button.btn.full-bundle,
button.btn.upgrade-bundle,
button.btn.school-license,
button.btn.individual-licence,
button.btn.book_bundle,
button.btn.ebook_bundle,
button.btn.school-license_bundle,
button.btn.individual-license_bundle {
  --tab-color: var(--pld-btn-blue-edge);

  font-family: var(--pld-btn-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  background: transparent;
  border: 2px solid var(--tab-color);
  border-radius: 0;
  color: var(--tab-color);
  width: 100%;
  height: 40px;
  padding: 0;
  margin: 12px 0 0;
  text-transform: none;
  box-shadow: none;
  text-wrap: wrap;
  cursor: pointer;
  position: relative;
}

button.btn.book:hover,
button.btn.ebook:hover,
button.btn.full-kit:hover,
button.btn.upgrade-kit:hover,
button.btn.full-bundle:hover,
button.btn.upgrade-bundle:hover,
button.btn.school-license:hover,
button.btn.individual-licence:hover,
button.btn.book_bundle:hover,
button.btn.ebook_bundle:hover,
button.btn.school-license_bundle:hover,
button.btn.individual-license_bundle:hover,
button.btn.book.active,
button.btn.ebook.active,
button.btn.full-kit.active,
button.btn.upgrade-kit.active,
button.btn.full-bundle.active,
button.btn.upgrade-bundle.active,
button.btn.school-license.active,
button.btn.individual-licence.active,
button.btn.book_bundle.active,
button.btn.ebook_bundle.active,
button.btn.school-license_bundle.active,
button.btn.individual-license_bundle.active {
  background: var(--tab-color);
  color: #fff;
}

button.btn.book.active::before,
button.btn.ebook.active::before,
button.btn.full-kit.active::before,
button.btn.upgrade-kit.active::before,
button.btn.full-bundle.active::before,
button.btn.upgrade-bundle.active::before,
button.btn.school-license.active::before,
button.btn.individual-licence.active::before,
button.btn.book_bundle.active::before,
button.btn.ebook_bundle.active::before,
button.btn.school-license_bundle.active::before,
button.btn.individual-license_bundle.active::before {
  content: '';
  position: absolute;
  left: 30px;
  top: -10px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 10px solid var(--tab-color);
  box-shadow: none;
}

/* SSP Multi-Kit Filter Bar */
.ssp-kit-filter-container {
  background-color: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px 20px;
}

.ssp-kit-filter-title {
  color: #1e70b8;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.ssp-kit-pill-btn {
  background-color: #fff;
  border: 2px solid #1e70b8;
  border-radius: 25px;
  color: #1e70b8;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 20px;
  transition: all 0.2s ease-in-out;
}

.ssp-kit-pill-btn:hover {
  background-color: #16568f;
  border-color: #16568f;
  color: #fff;
}

.ssp-kit-pill-btn.active {
  background-color: #1e70b8;
  border-color: #1e70b8;
  box-shadow: 0 2px 6px rgba(30, 112, 184, 0.3);
  color: #fff;
}

.ssp-kit-pill-all {
  border-color: #6c757d;
  color: #495057;
}

.ssp-kit-pill-all:hover {
  background-color: #6c757d;
  border-color: #6c757d;
  color: #fff;
}

.ssp-kit-pill-all.active {
  background-color: #495057;
  border-color: #495057;
  color: #fff;
}

.ssp-kit-filter-select-wrapper {
  max-width: 24rem;
}

.ssp-kit-select-dropdown {
  border: 2px solid #1e70b8;
  border-radius: 8px;
  color: #1e70b8;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
}

.ssp-kit-select-dropdown option {
  font-size: 14px;
}

button.pld-button.pld-tfa-configure {
  --btn-pad: 0 25px;
  height: 45px;
}