/* TRADDER Native Offer Stage Preview v0.4.1 — arrowhead alignment only; based on v0.4 desktop geometry, typography and baseline correction of Elementor iconography and layout.
   Scoped ONLY to admin preview on /ru/eksport-rapsa/. Existing content remains in DB.
   Reference: original Elementor widgets of post 2874 / production screenshots.
*/
.tradder-native-offer-host,
.tradder-native-offer-host > .elementor-widget,
.tradder-native-offer-host .elementor-widget-shortcode,
.tradder-native-offer-host .elementor-widget-container {width:100%!important;max-width:100%!important;}
.trd-native-offer,.trd-native-offer * {box-sizing:border-box;}
.trd-native-offer {
  width:100%;max-width:1140px;min-height:160px;
  margin:80px auto 100px;padding:30px;
  background-color:#fff;background-repeat:no-repeat;background-position:right bottom;
  box-shadow:0 1px 8px rgba(0,0,0,.26);
  display:flex;align-items:center;gap:0;
  color:#090909;font-family:"Proxima Nova",Arial,sans-serif;
  overflow:visible;
}
/* At full desktop widths the Elementor shortcode host on Stage is narrower
   than the original Production offer. Let the native block recover the
   original measured visual width instead of being capped by that host. */
@media(min-width:1100px) {
  .trd-native-offer {width:min(1120px,calc(100vw - 48px));max-width:none;align-self:center;flex-shrink:0;}
}
.trd-native-offer__left {flex:0 0 66%;width:66%;min-width:0;}
.trd-native-offer__right {flex:0 0 34%;width:34%;min-width:0;display:flex;justify-content:flex-end;align-items:center;}
.trd-native-offer__pricebar {
  width:92.487%;border:1px solid #61ce70;border-radius:5px;
  display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:baseline;
  gap:10px;padding:10px;min-height:50px;white-space:nowrap;
  font-size:18px;line-height:26px;
  overflow:visible;
}
.trd-native-offer__price-label {font-size:22px;font-weight:600;line-height:26px;flex:none;}
.trd-native-offer__tooltip {position:relative;display:inline-flex;align-items:center;align-self:center;flex:none;z-index:20;margin-right:12px;}
.trd-native-offer__info {
  appearance:none;display:inline-flex;align-items:center;justify-content:center;
  border:0!important;box-shadow:none!important;background:transparent!important;color:#fcaf3b!important;
  width:24px;height:24px;padding:0!important;margin:0!important;
  font:400 24px/1 "Font Awesome 5 Free",sans-serif;cursor:help;
}
.trd-native-offer__info .fa-info-circle {font-family:"Font Awesome 5 Free";font-weight:900;font-size:24px;line-height:1;}
.trd-native-offer__info:hover {color:#fcaf3b;}
.trd-native-offer__info:focus-visible {outline:2px solid #555;outline-offset:3px;}
/* Original tooltip opens BESIDE the icon. Keeping it side-anchored avoids the page header. */
.trd-native-offer__tooltip-body {
  position:absolute;display:none;pointer-events:none;
  left:calc(100% + 9px);top:50%;bottom:auto;right:auto;
  transform:translateY(-50%);width:260px;max-width:min(260px,calc(100vw - 38px));
  z-index:9999;white-space:normal;
  background:#fff;color:#111;padding:12px;
  border:1px solid #e6e6e6;border-radius:3px;
  box-shadow:0 3px 13px rgba(0,0,0,.25);
  font:400 16px/1.25 "Proxima Nova",Arial,sans-serif;
}
.trd-native-offer__tooltip-body::before {
  content:"";position:absolute;left:-7px;top:calc(50% - 7px);
  border-top:7px solid transparent;border-bottom:7px solid transparent;
  border-right:7px solid #fff;filter:drop-shadow(-1px 0 1px #ccc);
}
.trd-native-offer__tooltip-body p {margin:0;font:inherit;}
.trd-native-offer__tooltip:hover .trd-native-offer__tooltip-body,
.trd-native-offer__tooltip:focus-within .trd-native-offer__tooltip-body {display:block;}
.trd-native-offer__amount {font-size:18px;line-height:26px;font-weight:600;flex:none;}
/* Exact icon from Elementor widget fas fa-grip-lines-vertical, not a text glyph. */
.trd-native-offer__separator {
  color:#fcaf3b;display:inline-flex;align-items:center;justify-content:center;
  flex:none;align-self:center;margin:0 8px 0 14px;min-width:20px;height:24px;
  line-height:1;font-size:20px;
}
.trd-native-offer__separator .fa-grip-lines-vertical {font:900 20px/1 "Font Awesome 5 Free";}
.trd-native-offer__minimum {color:#e43838;font-size:18px;line-height:26px;font-weight:300;flex:1 1 auto;min-width:0;}
.trd-native-offer__arrows {display:flex;align-items:center;gap:8px;width:100%;margin:5px 0 5px;height:17px;}
.trd-native-offer__arrow {display:block;flex:1 1 0;min-width:0;height:3.5px;background:#fcaf3b;border-radius:1em;opacity:0;animation:trdNativeArrowPulse 3s ease infinite;}
.trd-native-offer__arrow--one {animation-delay:0s;flex-grow:7.75;}
.trd-native-offer__arrow--two {animation-delay:.1s;flex-grow:6.7;}
.trd-native-offer__arrow--three {animation-delay:.2s;flex-grow:3.45;}
/* Match the Production arrowhead: a 23x22px visible SVG, centered on the line. */
.trd-native-offer__arrow--four {animation-delay:.3s;background:transparent;height:27px;width:26px;flex:0 0 26px;display:flex;align-items:center;justify-content:center;transform:none;}
.trd-native-offer__arrow svg {width:100%;height:100%;display:block;fill:#fcaf3b;}
@keyframes trdNativeArrowPulse {0%,80%,100%{opacity:0}5%,60%{opacity:1}}
.trd-native-offer__question {font-size:22px;line-height:1.2;font-weight:600;color:#0a0a0a;}
.trd-native-offer__button {
  appearance:none!important;border:0!important;box-shadow:0 2px 10px rgba(0,0,0,.28)!important;
  border-radius:4px!important;background-color:#5cba42!important;color:#fff!important;
  padding:0 22px!important;min-height:58px;min-width:292px;max-width:100%;
  display:inline-flex;align-items:center;justify-content:center;gap:15px;
  font:300 18px/1.2 "Proxima Nova",Arial,sans-serif!important;text-transform:uppercase;
  white-space:nowrap;cursor:pointer;transition:background-color .18s ease;
}
.trd-native-offer__button > span {font-family:"Proxima Nova",Arial,sans-serif!important;font-size:18px!important;font-weight:300!important;line-height:1.2!important;}
.trd-native-offer__button:hover,.trd-native-offer__button:focus-visible {background-color:#fcaf3b!important;color:#fff!important;}
/* Exact Elementor selected_icon: far fa-envelope, not a simplified custom drawing. */
.trd-native-offer__envelope {font:400 18px/1 "Font Awesome 5 Free";flex:none;display:inline-block;}
@media(min-width:768px) and (max-width:1020px) {
  .trd-native-offer {padding:24px;}
  .trd-native-offer__pricebar {gap:6px;flex-wrap:wrap;white-space:normal;}
  .trd-native-offer__separator {margin:0 2px;}
  .trd-native-offer__tooltip {margin-right:0;}
  .trd-native-offer__button {min-width:0;padding:0 12px!important;font-size:14px!important;}
  .trd-native-offer__button > span {font-size:14px!important;}
}
@media(max-width:767px) {
  .trd-native-offer {width:100%;max-width:1140px;min-height:0;margin:0 auto 30px;padding:10px;flex-direction:column;gap:14px;}
  .trd-native-offer__left,.trd-native-offer__right {width:100%;flex:0 0 auto;}
  .trd-native-offer__right {justify-content:center;}
  .trd-native-offer__pricebar {width:100%;min-height:0;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:6px 8px;padding:9px 6px;white-space:normal;}
  .trd-native-offer__price-label {font-size:22px;}
  .trd-native-offer__amount {font-size:18px;}
  .trd-native-offer__minimum {font-size:16px;flex:0 1 auto;text-align:center;}
  .trd-native-offer__separator {font-size:18px;margin:0 2px;}
  /* Only mobile tooltip moves below the icon; this prevents right-edge clipping. */
  .trd-native-offer__tooltip-body {top:calc(100% + 12px);left:50%;transform:translateX(-50%);width:220px;}
  .trd-native-offer__tooltip-body::before {top:-7px;left:calc(50% - 7px);border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #fff;border-top:0;}
  .trd-native-offer__question {font-size:18px;text-align:center;}
  .trd-native-offer__arrows {margin:8px 0 6px;}
  .trd-native-offer__button {width:min(100%,295px);min-width:0;min-height:50px;padding:0 12px!important;font-size:15px!important;}
  .trd-native-offer__button > span {font-size:15px!important;}
}
@media(max-width:350px) {
  .trd-native-offer__pricebar {gap:5px;}
  .trd-native-offer__amount {font-size:18px;}
  .trd-native-offer__minimum {width:100%;}
  .trd-native-offer__tooltip-body {left:-80px;transform:none;}
}
@media(prefers-reduced-motion:reduce){.trd-native-offer__arrow {animation:none;opacity:1;}.trd-native-offer__button {transition:none;}}
@keyframes trdNativeButtonBounce {0%,20%,50%,80%,100%{transform:translateY(0)}40%{transform:translateY(-12px)}60%{transform:translateY(-6px)}}
.trd-native-offer__button.trd-native-offer__in-view {animation:trdNativeButtonBounce .85s ease-out 1;}
@media(prefers-reduced-motion:reduce){.trd-native-offer__button.trd-native-offer__in-view {animation:none;}}

/* TRADDER Production v1.8.2 — mobile-only directional animated arrow.
   Keep the desktop horizontal animation. On phones, move the existing
   arrow BELOW the question and turn it DOWN toward the submit button.
   No changes to offer.php, popups, prices or form bindings. */
@media (max-width:767px) {
  .trd-native-offer__left {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .trd-native-offer__pricebar { order: 1; }
  .trd-native-offer__question {
    order: 2;
    margin-top: 10px;
  }
  .trd-native-offer__arrows {
    order: 3;
    width: 24px;
    height: 48px;
    margin: 6px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
  }
  .trd-native-offer__arrows .trd-native-offer__arrow:not(.trd-native-offer__arrow--four) {
    width: 3.5px;
    height: 3px;
    min-height: 3px;
    flex: 0 0 3px;
  }
  .trd-native-offer__arrows .trd-native-offer__arrow--four {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    transform: rotate(90deg);
  }
}