/* All styling that is used for thewhole app */
 @font-face {
  font-family: "Nunito Bold";
  src: url("data/fonts/nunito/NUNITOSANS_10PT-EXTRABOLD.TTF") format("truetype");
  font-weight: 700; /* Optional: adjust as needed */
  font-style: normal;  /* Optional: adjust as needed */
}

@font-face {
  font-family: "Nunito Regular";
  src: url("data/fonts/nunito/NUNITOSANS_10PT-REGULAR.TTF") format("truetype");
  font-weight: 400; /* Optional: adjust as needed */
  font-style: normal;  /* Optional: adjust as needed */
}

@font-face {
  font-family: "Nunito Light";
  src: url("data/fonts/nunito/NUNITOSANS_10PT-LIGHT.TTF") format("truetype");
  font-weight: 300; /* Optional: adjust as needed */
  font-style: normal;  /* Optional: adjust as needed */
}

@font-face {
  font-family: "Gabarito";
  src: url("data/fonts/gabarito/Gabarito-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "Gabarito";
  src: url("data/fonts/gabarito/Gabarito-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Gabarito";
  src: url("data/fonts/gabarito/Gabarito-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Gabarito";
  src: url("data/fonts/gabarito/Gabarito-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

/* Use Bold as Regular since we don't have a regular weight file */
@font-face {
  font-family: "Gabarito";
  src: url("data/fonts/gabarito/Gabarito-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Gabarito";
  src: url("data/fonts/gabarito/Gabarito-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
:root {

  --size_input_field: 300px;
  --input_padding: 35px;
  --small_padding: 10px;
  --input_height: 36px;
  --footer_height: 45px;

  /* Input shadow variables */
  --input_shadow_offset_x: 0px;
  --input_shadow_offset_y: 0px;
  --input_shadow_blur: 0px;
  --input_shadow_spread: 0;
  --input_shadow_color: rgba(0, 0, 0, 0.3);
  --input_shadow: var(--input_shadow_offset_x) var(--input_shadow_offset_y) var(--input_shadow_blur) var(--input_shadow_spread) var(--input_shadow_color);

  /* slighter border for input fields */
  --input_border_width: 1px;
  --input_border_style: solid;
  --input_border_color: color-mix(in srgb, var(--clr_bg_tertiary) 60%, black);
  --input_border: var(--input_border_width) var(--input_border_style) var(--input_border_color);

  /* Input border solid (for elements that need visible borders) */
  --input_border_solid_width: 2px;
  --input_border_solid_style: solid;
  --input_border_solid_color: var(--clr_text_primary);
  --input_border_solid: var(--input_border_solid_width) var(--input_border_solid_style) var(--input_border_solid_color);

    /* Input border solid (for focus) */
    --input_border_focus_width: 2px;
    --input_border_focus_style: solid;
    --input_border_focus_color: var(--clr_interaction1);
    --input_border_focus: var(--input_border_focus_width) var(--input_border_focus_style) var(--input_border_focus_color);


  --font-size-very-small: 0.7em;
  --font-size-small: 0.8em;
  --font-size-large: 1.2em;
  --font-size-very-large: 2em;

  /* Button heights: the default (order UI) and the smaller one used by the
     user-site cards, where several actions sit next to the content. */
  --button_height: 48px;
  --button_height_small: 32px;

  /* Neutral track/divider grey derived from the shop's own palette (used by the
     boosting scale and card dividers, so no shop ships a hardcoded grey). The
     mix darkens bg_tertiary with its OWN partner text_tertiary: mixing in
     text_primary produced no track at all in a shop where text_primary equals
     bg_tertiary (groupm: both #F2F2F2). */
  --clr_track: color-mix(in srgb, var(--clr_text_tertiary) 18%, var(--clr_bg_tertiary));

}


 /*----------------------------------*/
 /* styling of the basic classes */



  /* general button styling */
  .tr-btn {
  border-radius: 3px !important; /* rounded corners */
  height: var(--button_height);
  cursor: pointer;
  transition: filter 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.tr-btn.tr-btn-default, .tr-btn.tr-btn-default:active {
  width: 164px;
  padding:0 var(--small_padding);
  border: var(--input_border);
}

/* Compact button. The user site puts two or three actions next to the content
   they act on (segment card, ticket card, campaign data), where the 48px
   default button dominates the row. Same colours / states as the default —
   only height, width and font size change, so a small button still reads as
   the same button. The width is its content (min 164px, the default button's
   width); inside the cards' flex action columns it stretches to the column on
   its own, so no container needs to override the width back and forth. */
.tr-btn.tr-btn-small, .tr-btn.tr-btn-small:active {
  width: auto;
  min-width: 164px;
  height: var(--button_height_small);
  padding: 0 var(--small_padding);
  border: var(--input_border);
  font-size: var(--font-size-small);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
}

.tr-btn.tr-btn-small:hover {
  filter: brightness(80%);
}

.tr-btn.tr-btn-large, .tr-btn.tr-btn-large:active{
  width: 100%;
  padding:0 var(--small_padding);
  border: var(--input_border);
}

.tr-btn.tr-btn-fit, .tr-btn.tr-btn-fit:active{
  width: fit-content;
  height: fit-content;
  padding: 0 var(--small_padding);
  border: var(--input_border);
}

/* Hover: brightness filter for solid buttons */
.tr-btn.tr-btn-default:hover,
.tr-btn.tr-btn-large:hover,
.tr-btn.tr-btn-fit:hover{
  filter: brightness(80%);
}


.tr-btn.tr-btn-inline {
  width: auto;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  color: var(--clr_text_primary) ;
  text-decoration: none;
}
.tr-btn.tr-btn-inline:hover,
.tr-btn.tr-btn-inline:focus,
.tr-btn.tr-btn-inline:active,
.tr-btn.tr-btn-inline:hover:focus,
.tr-btn.tr-btn-inline:focus-visible,
.tr-btn.tr-btn-inline:hover:active {
  color: var(--clr_interaction1);
  background:none;
  box-shadow: none;
}

.tr-btn.tr-btn-inline:focus,
.tr-btn.tr-btn-inline:active {
  color: color-mix(in srgb, var(--clr_interaction1) 80%, black);
  background:none;
}


/* data-color rules include :hover/:focus/:active to override Bootstrap .btn-default:hover */
.tr-btn[data-color="danger"],
.tr-btn[data-color="danger"]:hover,
.tr-btn[data-color="danger"]:focus,
.tr-btn[data-color="danger"]:active {
  color: var(--clr_text_secondary);
  background-color: var(--clr_danger);
  border-color: var(--input_border_color);
}

.tr-btn[data-color="warning"],
.tr-btn[data-color="warning"]:hover,
.tr-btn[data-color="warning"]:focus,
.tr-btn[data-color="warning"]:active {
  color: var(--clr_text_secondary);
  background-color: var(--clr_warning);
  border-color: var(--input_border_color);
}

.tr-btn[data-color="success"],
.tr-btn[data-color="success"]:hover,
.tr-btn[data-color="success"]:focus,
.tr-btn[data-color="success"]:active {
  color: var(--clr_text_secondary);
  background-color: var(--clr_success);
  border-color: var(--clr_text_primary);
}

.tr-btn[data-color="accent"],
.tr-btn[data-color="accent"]:hover,
.tr-btn[data-color="accent"]:focus,
.tr-btn[data-color="accent"]:active {
  color: var(--clr_text_secondary);
  background-color: var(--clr_interaction1);
  border-color: var(--clr_text_secondary);
}

.tr-btn[data-color="accent-reverse"],
.tr-btn[data-color="accent-reverse"]:hover,
.tr-btn[data-color="accent-reverse"]:focus,
.tr-btn[data-color="accent-reverse"]:active {
  color: var(--clr_interaction1);
  background-color: var(--clr_bg_primary);
  border-color: var(--clr_interaction1);
}

.tr-btn[data-color="interaction2"],
.tr-btn[data-color="interaction2"]:hover,
.tr-btn[data-color="interaction2"]:focus,
.tr-btn[data-color="interaction2"]:active {
  color: var(--clr_text_primary);
  background-color: var(--clr_interaction2);
  border-color: var(--clr_interaction2);
}

.tr-btn[data-color="interaction2-reverse"],
.tr-btn[data-color="interaction2-reverse"]:hover,
.tr-btn[data-color="interaction2-reverse"]:focus,
.tr-btn[data-color="interaction2-reverse"]:active {
  color: var(--clr_interaction2);
  background-color: var(--clr_bg_primary);
  border-color: var(--clr_interaction2);
}

/* Disabled: a grey, obviously-dead button. The fill is the neutral track grey,
   not `--clr_bg_tertiary` — that is the colour of the surfaces disabled buttons
   sit on (cards, modals), so the button used to disappear into its background
   and read as loose text. */
.tr-btn:disabled,
.tr-btn[disabled],
.tr-btn:disabled:hover,
.tr-btn[disabled]:hover {
  color: var(--clr_text_tertiary);   /* the track is a bg_tertiary mix */
  background-color: var(--clr_track);
  border: var(--input_border);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Override data-color styles when button is disabled */
.tr-btn[data-color]:disabled,
.tr-btn[data-color][disabled],
.tr-btn[data-color]:disabled:hover,
.tr-btn[data-color][disabled]:hover {
  color: var(--clr_text_tertiary);   /* the track is a bg_tertiary mix */
  background-color: var(--clr_track);
  border: var(--input_border);
  cursor: not-allowed;
  opacity: 0.7;
  filter: none;
}

/* For non-button elements, data-color only affects text color */
:not(.btn)[data-color] {
  background-color: transparent;
  border-color: transparent;
}
:not(.btn)[data-color="danger"] { color: var(--clr_danger); }
:not(.btn)[data-color="warning"] { color: var(--clr_warning); }
:not(.btn)[data-color="success"] { color: var(--clr_success); }
:not(.btn)[data-color="accent"] { color: var(--clr_interaction1); }
:not(.btn)[data-color="accent-reverse"] { color: var(--clr_interaction1); }
:not(.btn)[data-color="interaction2"] { color: var(--clr_interaction2); }
:not(.btn)[data-color="interaction2-reverse"] { color: var(--clr_interaction2); }



  /*----------------------------------*/
  /* styling of the basic elements */

  html body {
    font-family: var(--font-primary) ;
    font-weight: 400;
    font-size: 16px;
    background-color: var(--clr_bg_primary) ;
    color: var(--clr_text_primary) ;
  }
  h1, h2 {
    font-weight: 700;
  }

  h3, h4, h5, h6{
    font-weight: 600;
  }