/* Localized coupon CTAs: equal widths, wrapping labels, no exposed code.
   Same treatment as znizkinahosting.pl and hostingkedvezmenyek.hu.

   Why the theme needs it: "Použít kód" is 138px against the ~96px of the
   English "Get Code" it was drawn for, so the label plus its hard coded 84px
   wedge covered the whole 220px button, and the masked code beside it was cut
   through the middle of a glyph. The codes run 75-118px and only ~23px was
   left, so no wedge width could have fitted them - the teaser goes, the label
   takes the button.

   Colours are deliberately NOT touched here; this file only changes the box.

   Careful with .unhidden-code: those coupons put the code itself on the
   button as its label, so it must stay visible. It rides on .coupon-deal and
   only picks up the shared box below. */
.coupon-button-type {
  width: 260px;
  max-width: 100%;
}
.coupon-button-type .coupon-deal,
.coupon-button-type .coupon-print,
.coupon-button-type .coupon-code {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 12px 16px;
  line-height: 1.4;
  font-size: 14px;
  letter-spacing: .3px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.coupon-button-type .coupon-code {
  padding: 0;
  border: 0;
  overflow: hidden;
}
.coupon-button-type .coupon-code .code-text {
  display: none;
}
.coupon-button-type .coupon-code .get-code,
.coupon-button-type .coupon-code .get-code:hover {
  position: static;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  font-size: inherit;
  line-height: inherit;
  border-radius: 3px;
}
.coupon-button-type .coupon-code .get-code:after {
  display: none;
}
.coupon-button-type .exp-text {
  white-space: normal;
  overflow-wrap: anywhere;
}
.coupon-button-type a:focus-visible {
  outline: 3px solid #005f65;
  outline-offset: 3px;
}

/* Each coupon type gets its own colour, the same split the Polish and
   Hungarian sites run: code keeps the brand orange as the primary action,
   sale takes the accent the logo and the links already use, and trial its
   darker shade. Badge and button share one colour per type. */
.coupon-button-type a[data-type="sale"].coupon-deal {
  background: #00979d;
}
.coupon-button-type a[data-type="trial"].coupon-deal {
  background: #005f65;
}
/* The options panel prints the old palette a second time, inline in the head,
   so it lands after this file and wins at equal weight. These selectors carry
   one class more than that copy - the badge already has both c-code and
   c-sale, and the count doubles its own class - which is the smallest thing
   that beats generated CSS we do not control. */
.c-type .c-code.c-sale,
.coupon-listing-item .c-type .c-code.c-sale {
  background: #00979d;
}
.coupon-filter .ui.menu .item .sale-count.sale-count {
  background: #00979d;
}
.coupon-filter .ui.menu .item .trial-count.trial-count {
  background: #005f65;
}
.c-type .c-code.c-trial,
.coupon-listing-item .c-type .c-code.c-trial {
  background: #005f65;
}

/* Waiting for a held back code. Semantic ships a loader, but its .ui.loader is
   a zero height box the theme then overrides, so this is its own eleven lines
   rather than a fight with someone else's cascade. */
.code-locked-spinner {
  display: inline-block;
  width: 26px;
  height: 26px;
  border: 3px solid #e9e9e9;
  border-top-color: #ff9900;
  border-radius: 50%;
  animation: dw-code-spin .8s linear infinite;
}
@keyframes dw-code-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .code-locked-spinner { animation-duration: 2.4s; }
}