/* custom style */

.input-community-user-new .PhoneInputInput {
    border: none !important;
    --tw-ring-color: none !important;
}

@media (max-width: 960px) {
    .tailwind-range-picker .rdrDateRangePickerWrapper {
        display: flex;
        flex-direction: column;
    }

    .tailwind-range-picker .rdrDefinedRangesWrapper {
        width: 100%;
    }

    .tailwind-range-picker .rdrStaticRanges {
        flex-direction: row;
        overflow-y: auto;
        width: 320px;
        white-space: nowrap;
    }

    .tailwind-range-picker .rdrMonths {
        flex-direction: column;
        width: 320px;
    }
}

.tailwind-range-picker .rdrSelected,
.tailwind-range-picker .rdrInRange,
.tailwind-range-picker .rdrStartEdge,
.tailwind-range-picker .rdrEndEdge {
    background-color: #0244e0;
}

.tailwind-range-picker .rdrDayToday .rdrDayNumber span:after {
    background-color: #0244e0;
}

.tailwind-range-picker .rdrDayHovered {
    color: #0244e0;
}

.tag-blue {
    color: #fff !important;
    background-color: #07f !important;
}

.tag-green {
    color: #fff !important;
    background-color: #14c773 !important;
}

.tag-yellow {
    color: #fff !important;
    background-color: #fab650 !important;
}

.tag-skyblue {
    color: #fff !important;
    background-color: #00bbe0 !important;
}

.tag-red {
    color: #fff !important;
    background-color: #f04943 !important;
}

.tag-pink {
    color: #fff !important;
    background-color: #ff357c !important;
}

.tag-purple {
    color: #fff !important;
    background-color: #2d085f !important;
}

.tag-grey {
    color: #fff !important;
    background-color: #8e968d !important;
}

.tag-dark {
    color: #fff !important;
    background-color: #526275 !important;
}

.tag-orange {
    color: #fff !important;
    background-color: #fe7b01 !important;
}

.tag-dull-green {
    color: #fff !important;
    background-color: #829962 !important;
}

.plyr--full-ui {
    border-radius: 1rem !important;
}

aside.EmojiPickerReact.epr-main {
    height: 350px !important;
    width: 350px !important;
}

.bottom-emoji .emoji-parent-style {
    position: absolute !important;
    bottom: 35px !important;
    left: auto !important;
    z-index: 999 !important;
    transform: none !important;
}

.title-emoji .emoji-parent-style {
    bottom: 35px !important;
    position: absolute !important;
    z-index: 999 !important;
    transform: none !important;
    right: 0 !important;
}

@media (max-width: 960px) {
    aside.EmojiPickerReact.epr-main {
        height: 250px !important;
        width: 250px !important;
    }
    .bottom-emoji .emoji-parent-style {
        position: absolute !important;
        bottom: 35px !important;
        left: 50% !important;
        z-index: 999 !important;
        transform: translateX(-50%) !important;
    }
    .title-emoji .emoji-parent-style {
        bottom: 35px !important;
        position: absolute !important;
        left: 50% !important;
        z-index: 999 !important;
        transform: translateX(-50%) !important;
        right: inherit !important;
    }
}

.tox-tinymce.tox-tinymce--toolbar-bottom {
    border: 1px solid rgb(228, 229, 236) !important;
}

.aaron-date {
    font-size: 14px;
    line-height: 1;
    text-align: center;
    position: relative;
    color: #526275;
    margin: 10px 0;
}

.aaron-date::after {
    content: '';
    position: absolute;
    right: 0;
    top: 7px;
    width: 40%;
    border: 1px solid #e4e5ec;
}

.aaron-date::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 40%;
    border: 1px solid #e4e5ec;
}

.chat-quill .tox .tox-edit-area__iframe {
    height: 120px;
}

.fsp-picker__brand-container {
    display: none !important;
}
@media (max-width: 960px) {
    .responsive-player .plyr__controls .plyr__controls__item.plyr__time {
        display: none !important;
    }
    .responsive-player .plyr__controls__item.plyr__menu {
        display: none !important;
    }
    .plyr.plyr--full-ui.plyr--video.plyr--html5.plyr--fullscreen-enabled.plyr--paused.plyr--pip-supported.plyr--is-touch {
        height: 220px !important;
    }
}

.page-alert-container {
    position: fixed;
    bottom: 0;
    left: 15px;
    right: 15px;
    display: flex;
    justify-content: center;
    pointer-events: none;
    z-index: 21;
}

@media only screen and (min-width: 1000px) {
    .page-alert-container {
        top: 0;
        bottom: auto;
    }
}

.compose-tiny .tox-tinymce.tox-tinymce--toolbar-bottom {
    border: 0 !important;
}

.compose-tiny .tox:not(.tox-tinymce-inline).tox-tinymce--toolbar-bottom .tox-editor-header {
    border-top: 0 !important;
}

.compose-select .css-19jojpj-control {
    border: 0 !important;
    border-bottom: 1px solid rgba(228, 229, 236, 1) !important;
    padding: 0 !important;
}

.compose-select .css-g1d714-ValueContainer {
    padding: 8px 0 !important;
}

.compose-select .css-1wa3eu0-placeholder {
    color: #526275;
}

.compose-select .css-2b097c-container:focus,
.compose-select .css-2b097c-container:focus-within,
.compose-select .css-2b097c-container:focus-visible {
    border: none !important;
}

.tox .tox-toolbar--scrolling {
    flex-wrap: wrap !important;
}
.tox-toolbar__primary {
    flex-wrap: wrap !important;
}

/* Rich HTML (Quill, etc.) — overrides Tailwind preflight in main-v2.css (menu,ol,ul { list-style:none }) */
.custom-parse ol,
.custom-parse ul {
  list-style-position: outside;
  margin: 0.5em 0;
  padding-left: 1.5em;
}

.custom-parse ol {
  list-style-type: decimal;
}

.custom-parse ul {
  list-style-type: disc;
}

.custom-parse .ql-align-center {
  text-align: center;
}
.custom-parse .ql-align-right {
  text-align: right;
}
.custom-parse .ql-align-justify {
  text-align: justify;
}
.custom-parse .ql-video {
  display: block;
  max-width: 100%;
}
.custom-parse .ql-video.ql-align-center {
  margin-left: auto;
  margin-right: auto;
}
.custom-parse .ql-video.ql-align-right {
  margin-left: auto;
  margin-right: 0;
}
.custom-parse .ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 3em;
}
.custom-parse li.ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 4.5em;
}
.custom-parse .ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 3em;
}
.custom-parse li.ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 4.5em;
}
.custom-parse .ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 6em;
}
.custom-parse li.ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 7.5em;
}
.custom-parse .ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 6em;
}
.custom-parse li.ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 7.5em;
}
.custom-parse .ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 9em;
}
.custom-parse li.ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 10.5em;
}
.custom-parse .ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 9em;
}
.custom-parse li.ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 10.5em;
}
.custom-parse .ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 12em;
}
.custom-parse li.ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 13.5em;
}
.custom-parse .ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 12em;
}
.custom-parse li.ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 13.5em;
}
.custom-parse .ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 15em;
}
.custom-parse li.ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 16.5em;
}
.custom-parse .ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 15em;
}
.custom-parse li.ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 16.5em;
}
.custom-parse .ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 18em;
}
.custom-parse li.ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 19.5em;
}
.custom-parse .ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 18em;
}
.custom-parse li.ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 19.5em;
}
.custom-parse .ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 21em;
}
.custom-parse li.ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 22.5em;
}
.custom-parse .ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 21em;
}
.custom-parse li.ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 22.5em;
}
.custom-parse .ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 24em;
}
.custom-parse li.ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 25.5em;
}
.custom-parse .ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 24em;
}
.custom-parse li.ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 25.5em;
}
.custom-parse .ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 27em;
}
.custom-parse li.ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 28.5em;
}
.custom-parse .ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 27em;
}
.custom-parse li.ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 28.5em;
}

.custom-parse a {
    text-decoration: underline !important;
}

.link-style a {
    text-decoration: underline !important;
}
.hashtag {
    cursor: pointer;
    color: blue;
}
/* No cursor change: on this side a mention is coloured text and nothing more. The profile card that
   used to open from these chips was removed, and a pointer cursor promises a click that never
   answers. The admin app keeps both the card and the pointer. */
.mention {
    color: #1d4ed8;
    font-weight: 500;
}
/* In the composer mirror the mention must keep the exact glyph width of the textarea's own,
   unstyled "@Name" behind it. The bolder weight above makes each chip a touch wider than that run,
   so the caret is measured short and drifts left of the text - worse with every mention added.
   Colour alone marks a mention here; the heavier weight is only for the rendered comment. */
.mention-input__mirror .mention {
    font-weight: normal;
}
/* Comment composer: a textarea cannot colour part of its own text, so it keeps the caret and the
   typing while the mirror behind it keeps the colour. Only the field's own paint is dropped - the
   two layers carry the identical class list, so every metric that decides where a glyph lands
   (font, line-height, padding, border, width) is set from the same place and the chips land on
   the characters they belong to. Nothing here may override those. */
.mention-input {
    position: relative;
}
.mention-input__mirror {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}
/* Two selectors deep so this outranks any equal-specificity !important colour utility the field
   also carries - otherwise it paints its own text on top of the mirror's chips. */
.mention-input .mention-input__field {
    position: relative;
    background-color: transparent !important;
    color: transparent !important;
    /* The field's own text is invisible, so the caret has to be painted back in the colour the
       .text-light utility would have given it. */
    caret-color: rgb(var(--light));
    /* The mirror cannot show a scrollbar, so a scrollbar here would narrow only one of the two
       layers and push the chips out of place. */
    scrollbar-width: none;
}
.mention-input__field::-webkit-scrollbar {
    display: none;
}
/* Reaction picker: match the admin popover in vn-community, which scales an emoji up on hover
   (`hover:scale-125` + `duration-300`) rather than lifting it. Scoped under .reaction-panel so it
   outranks the `translateY(-10px)` rule in main-v2.css regardless of stylesheet load order. */
.reaction-panel .reaction-icon {
    transition: transform 0.3s ease-in-out;
}
.reaction-panel .reaction-icon:hover {
    transform: scale(1.25);
}
@media (max-width: 426px){
    .small-screen-font{
      font-size: 10px;
      max-width: 120px;
    }
  }

/* One blink, one second long: the row goes blue the moment it is linked to, blinks off halfway
   through, and the script drops the class as the animation ends - so it never loops and never
   lingers. step-end, not step-start, is what puts the blue first; step-start would show the off
   half first and read as a delayed flash. */
.highlight-blink {
background-color: rgb(214, 226, 255);
animation: blink 1s step-end 0s 1;
}

@keyframes blink {
50% {
    background-color: #F9F9F9;
}
}
/* ─── Community terms of use popup ──────────────────────────────────────
   Opened from the checkout consent line when a community uses its own terms.
   Bootstrap's modal CSS is not loaded here, so all three of reactstrap's nodes
   are styled from scratch: .modal is the dark overlay, .modal-dialog only sets
   the width, .modal-content is the white card. The overlay has to be the .modal
   node rather than the dialog - reactstrap closes on a backdrop click only when
   the click lands on the dialog's parent - and display needs !important because
   reactstrap writes display:block inline while the modal is open.
   Only the recessed panel scrolls: the card is a flex column with a
   min-height:0 middle child, so the card itself never outgrows the viewport. */
.community-terms-modal {
  position: fixed;
  inset: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 44px 40px;
  background: rgba(10, 8, 59, 0.42);
}

.community-terms-dialog {
  width: 100%;
  max-width: 880px;
  margin: 0;
  pointer-events: none;
}

/* border-box explicitly: the 880px and the 86vh ceiling are the outside of the
   card, padding included, and this file is also served to pages whose reset
   does not set it. */
.community-terms-modal *,
.community-terms-modal *::before,
.community-terms-modal *::after {
  box-sizing: border-box;
}

.community-terms-content {
  pointer-events: auto;
  width: 100%;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #ffffff;
  border: 0;
  border-radius: 20px;
  padding: 34px 38px 36px;
  box-shadow: 0 34px 80px -26px rgba(10, 8, 59, 0.55);
}

/* Phone grab handle: hidden on desktop, where the card is centred, not dragged up. */
.community-terms-grab {
  display: none;
}

.community-terms-head {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex: 0 0 auto;
  padding-bottom: 22px;
}

.community-terms-titles {
  flex: 1 1 auto;
  min-width: 0;
}

.community-terms-title {
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.2;
  color: #0a083b;
}

.community-terms-sub {
  font-size: 14px;
  color: #526275;
  margin-top: 6px;
}

.community-terms-x {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #8d98aa;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.community-terms-x:hover {
  background: #f3f4f8;
  color: #0a083b;
}

/* flex + min-height:0 is what lets this shrink below its content so the panel
   inside it scrolls instead of pushing the card past the 86vh ceiling. Short
   terms leave nothing to grow into, so the card still hugs its content. */
.community-terms-scroll {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

/* Fade over the last rows, so a cut-off sentence reads as "keep scrolling"
   rather than as the end of the terms. pointer-events:none keeps the text
   under it selectable. */
.community-terms-scroll::after {
  content: '';
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 1px;
  height: 54px;
  border-radius: 0 0 15px 15px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(248, 249, 251, 0), #f8f9fb 76%);
}

.community-terms-body {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
  /* Keeps a flick at the end of the terms from scrolling the checkout behind. */
  overscroll-behavior: contain;
  background: #f8f9fb;
  border-radius: 16px;
  padding: 30px 34px 48px;
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.78;
  color: #3b4055;
}

/* Always visible, never overlaid: a buyer must be able to see there is more to
   read without hovering first. The thumb's border is the panel colour, which is
   what makes a 14px track read as a slim bar.
   Deliberately no scrollbar-width/scrollbar-color here - in current Chrome those
   standard properties switch the ::-webkit-scrollbar styling off, and macOS then
   falls back to an overlay bar that fades out when idle. Firefox, which has no
   ::-webkit-scrollbar at all, gets them through the @supports below. */
.community-terms-body::-webkit-scrollbar {
  width: 14px;
}

.community-terms-body::-webkit-scrollbar-track {
  background: transparent;
}

.community-terms-body::-webkit-scrollbar-thumb {
  background: #2a2e3d;
  border-radius: 999px;
  border: 5px solid #f8f9fb;
}

@supports not selector(::-webkit-scrollbar) {
  .community-terms-body {
    scrollbar-width: thin;
    scrollbar-color: #2a2e3d transparent;
  }
}

/* The owner's formatting comes from the shared `custom-parse` rules this element
   also carries - lists, alignment, indentation, underlined links - the same ones
   the community overview and chat messages render with.
   Full width by choice: the design's 76ch reading measure left a wide empty
   column down the right of the panel, and right-aligned or centred lines then
   looked aligned to nothing. The terms now use the whole panel, and the panel
   itself stays the only scroller. */
.community-terms-measure {
  width: 100%;
}

/* The one thing `custom-parse` cannot cover: the classic template resets h1-h6 to
   `font-size: inherit; font-weight: inherit`, so a heading the owner wrote would
   arrive as plain body text (measured: 16px/400) while the admin editor, which has
   no such reset, shows it at the browser's own size. Quill never sets a heading
   size either - it only zeroes their margins - so these two rules restore exactly
   the defaults the reset removed, and the popup then reads like the editor. In em,
   so they follow the panel's 14.5px desktop / 16px phone body text. */
.community-terms-measure h1 {
  font-size: 2em;
  font-weight: bold;
}

.community-terms-measure h2 {
  font-size: 1.5em;
  font-weight: bold;
}

/* Sheet motion, phones only - the desktop card is centred, so it has nothing to
   slide from. `.is-closing` is set by the component, which then holds the modal
   open for exactly as long as these keyframes run.
   The ease-out curve is deliberately asymmetric: coming up it decelerates into
   place, going down it just leaves. */
@keyframes community-terms-sheet-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes community-terms-sheet-out {
  from { transform: translateY(0); }
  to { transform: translateY(100%); }
}

@keyframes community-terms-scrim-in {
  from { background-color: rgba(10, 8, 59, 0); }
  to { background-color: rgba(10, 8, 59, 0.42); }
}

@keyframes community-terms-scrim-out {
  from { background-color: rgba(10, 8, 59, 0.42); }
  to { background-color: rgba(10, 8, 59, 0); }
}

@media (max-width: 1023px) {
  .community-terms-modal {
    align-items: flex-end;
    padding: 0;
    animation: community-terms-scrim-in 280ms ease both;
  }

  .community-terms-content {
    animation: community-terms-sheet-in 280ms cubic-bezier(0.32, 0.72, 0, 1) both;
  }

  .community-terms-modal.is-closing {
    animation: community-terms-scrim-out 280ms ease both;
  }

  .community-terms-modal.is-closing .community-terms-content {
    animation: community-terms-sheet-out 280ms cubic-bezier(0.4, 0, 1, 1) both;
  }

  .community-terms-dialog {
    max-width: none;
  }

  .community-terms-content {
    height: 90vh;
    max-height: 90vh;
    border-radius: 22px 22px 0 0;
    padding: 0 16px 20px;
  }

  .community-terms-grab {
    display: flex;
    justify-content: center;
    flex: 0 0 auto;
    padding: 10px 0 4px;
  }

  .community-terms-grab span {
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: #d7dae4;
  }

  .community-terms-head {
    gap: 12px;
    padding: 8px 0 14px;
  }

  .community-terms-title {
    font-size: 19px;
  }

  .community-terms-sub {
    font-size: 13px;
    margin-top: 3px;
  }

  /* 16px body copy on a phone, per the design - smaller than this is where
     reading a terms document on a handset stops being realistic. */
  .community-terms-body {
    padding: 20px 18px 38px;
    border-radius: 14px;
    font-size: 16px;
    line-height: 1.7;
  }

  .community-terms-scroll::after {
    height: 44px;
    border-radius: 0 0 13px 13px;
  }
}

/* Someone who asked for less motion gets the sheet placed, not thrown. The
   component skips its own close delay under the same query, so nothing waits
   on an animation that will not play. */
@media (prefers-reduced-motion: reduce) {
  .community-terms-modal,
  .community-terms-modal .community-terms-content {
    animation: none !important;
  }
}