{"version":3,"file":"styles/admin/dashboard-styles.css","mappings":";AAyNA,KAIE,kBADA,mBAFA,kBACA,UAEA,CC7NF,MAEE,uBACA,wBACA,qBACA,qBACA,wBACA,sBACA,uBAGA,oBACA,oBACA,oBACA,qBACA,sBACA,oBACA,sBACA,qBACA,iBACA,sBACA,mBACA,sBACA,qBAGA,gCAIA,aACA,aACA,aACA,aACA,aACA,aACA,aACA,aACA,aAGA,gBACA,kBACA,iBACA,kBACA,aACA,kBACA,iBACA,gBACA,kBACA,eACA,kBACA,gBACA,iBACA,aACA,kBACA,eACA,kBAGA,yBACA,gBACA,sBACA,uBACA,gBACA,eACA,cAGA,MACA,OACA,OACA,OACA,OACA,OACA,OACA,cACA,eACA,eAGA,MACA,OACA,OACA,OACA,OACA,OACA,OACA,cACA,eACA,eAGA,yBACA,qBACA,yBACA,mEACA,qEACA,qEACA,qEACA,qEACA,qEACA,qEAGA,WACA,aACA,aACA,aACA,aACA,kBAGA,qBACA,kBACA,0BACA,sBACA,kBACA,kBACA,mBACA,mBAGA,iBACA,wBACA,mBACA,mBACA,yBACA,iBACA,2BACA,qBACA,qBACA,mBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBCrHF,wBAGC,4FADA,wBADA,gBAEA,CAEA,0BACC,sBANF,wBAQC,iBAGD,mBACC,mDACA,mBAEA,wEADA,eACA,CAID,0BAKC,kDA3BoB,CA4BpB,WAEA,eANA,8BAEA,iBAIA,CAEA,mFAPA,mBAFA,aAMA,QAMC,CAIA,4CACC,YACA,WAKD,kDAKC,WAHA,eACA,gBACA,gBAHA,QAIA,CAGD,iDAEC,eADA,eAEA,WAIF,0DAEC,mBADA,aAEA,SAGD,2CACC,8BAEA,mBACA,eACA,gBACA,oBAJA,gBAIA,CAKF,aAIC,kBAKA,uBAEA,CAEA,wBACC,eAEA,YADA,UACA,CAGD,mCACC,8BAEA,oCADA,UACA,CAEA,yCACC,8BACA,WAIF,iCACC,kBAxHoB,CAyHpB,aApHe,CAsHf,uBADA,UACA,CAEA,uCACC,mBAEA,0CADA,0BACA,CA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","sources":["webpack:///./assets/admin/scss/abstracts/_mixins.scss","webpack:///./assets/admin/scss/abstracts/_root.scss","webpack:///./assets/admin/scss/admin/_dashboard.scss","webpack:///./assets/admin/scss/admin/_analytics-locked.scss","webpack:///./assets/admin/scss/admin/_setup-wizard.scss"],"sourcesContent":["/*--------------------------------------\n\t- Base\n----------------------------------------*/\n\n// Body Mixin\n@mixin body($font-family: $font, $font-weight: 400, $color: $global-color, $font-size: $global-font-size, $line-height: 1.5) {\n  font-family: $font-family;\n  font-weight: $font-weight;\n  font-size: $font-size;\n  line-height: $line-height;\n  text-rendering: optimizeSpeed;\n  color: $color;\n}\n\n@mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {\n  $u1: unit($min-vw);\n  $u2: unit($max-vw);\n  $u3: unit($min-font-size);\n  $u4: unit($max-font-size);\n\n  @if $u1==$u2 and $u1==$u3 and $u1==$u4 {\n    & {\n      font-size: $min-font-size;\n\n      @media screen and (min-width: $min-vw) {\n        font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));\n      }\n\n      @media screen and (min-width: $max-vw) {\n        font-size: $max-font-size;\n      }\n    }\n  }\n}\n\n//Before Icon mixin\n@mixin before-icon($content, $color) {\n  content: $content;\n  font-family: IcoFont;\n  color: $color;\n  vertical-align: middle;\n}\n\n/**\n * Convert font-size from px to rem with px fallback\n *\n * @param $size - the value in pixel you want to convert\n *\n * e.g. p {@include fontSize(12px);}\n *\n */\n\n// Mixin that will include the fall back px declaration as well as the calculated rem value.\n@mixin fs-rem($size) {\n  font-size: rem($size);\n}\n\n// Font Size Class\n@mixin font($size, $breakpoint: null, $pre: px) {\n\n  @if $breakpoint {\n    @include media-up(#{$breakpoint}) {\n      .font-#{$breakpoint}-#{$size} {\n        font-size: #{$size}#{$pre};\n      }\n    }\n  } @else {\n    .font-#{$size} {\n      font-size: #{$size}#{$pre};\n    }\n  }\n}\n\n//Line Height\n@mixin line-height($size, $breakpoint: null, $pre: px) {\n  @if $breakpoint {\n    @include media-up(#{$breakpoint}) {\n      .line-height-#{$breakpoint}-#{$size} {\n        line-height: #{$size}#{$pre};\n      }\n    }\n  } @else {\n    .line-height-#{$size} {\n      line-height: #{$size}#{$pre};\n    }\n  }\n}\n\n// hr mixin\n@mixin hr($bg: $global-color, $width: 50px, $height: 5px, $my: 50px, $mx: 0, $p: 0, $radius: 0) {\n  background: $bg;\n  width: $width;\n  height: $height;\n  margin: $my $mx;\n  padding: $p;\n  border: none;\n  border-radius: $radius;\n  opacity: 1;\n}\n\n@mixin media-up($name, $breakpoints: $breakpoints) {\n  $min: breakpoint-min($name, $breakpoints);\n\n  @if $min {\n    @media (min-width: $min) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-down($name, $breakpoints: $breakpoints) {\n  $max: breakpoint-max($name, $breakpoints);\n\n  @if $max {\n    @media (max-width: $max) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n// Media that spans multiple breakpoint widths.\n// Makes the @content apply between the min and max breakpoints\n@mixin media-between($lower, $upper, $breakpoints: $breakpoints) {\n  $min: breakpoint-min($lower, $breakpoints);\n  $max: breakpoint-max($upper, $breakpoints);\n\n  @if $min !=null and $max !=null {\n    @media (min-width: $min) and (max-width: $max) {\n      @content;\n    }\n  } @else if $max==null {\n    @include media-up($lower, $breakpoints) {\n      @content;\n    }\n  } @else if $min==null {\n    @include media-down($upper, $breakpoints) {\n      @content;\n    }\n  }\n}\n\n// For each breakpoint, define the maximum width of the container in a media query\n@mixin container-max-widths($max-widths: $container-widths, $breakpoints: $breakpoints) {\n\n  @each $breakpoint,\n  $container-width in $max-widths {\n    @include media-up($breakpoint) {\n      max-width: $container-width;\n    }\n  }\n}\n\n/// Grid system\n//\n// Generate semantic grid columns with these mixins.\n@mixin container($name: container, $gutter: $gutter-width) {\n  .#{$name} {\n    width: 100%;\n    padding-right: $gutter / 2;\n    padding-left: $gutter / 2;\n    margin-right: auto;\n    margin-left: auto;\n    @include container-max-widths();\n  }\n}\n\n@mixin container-fluid($name: container-fluid, $gutter: $gutter-width) {\n  .#{$name} {\n    width: 100%;\n    padding-right: $gutter / 2;\n    padding-left: $gutter / 2;\n    margin-right: auto;\n    margin-left: auto;\n  }\n}\n\n// Row\n//\n// Rows contain your columns.\n@mixin row($name: row, $gutter: $gutter-width, $max-width: false) {\n  @if $max-width==true {\n    .#{$name} {\n      margin-right: auto;\n      margin-left: auto;\n      display: flex;\n      flex-flow: row wrap;\n      @include container-max-widths();\n    }\n  } @else {\n    .#{$name} {\n      display: flex;\n      flex-wrap: wrap;\n      margin-right: -$gutter / 2;\n      margin-left: -$gutter / 2;\n    }\n  }\n}\n\n@mixin column($size, $column: $columns) {\n  flex: 0 0 percentage($size / $column);\n  // Add a `max-width` to ensure content within each column does not blow out\n  // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari\n  // do not appear to require this.\n  max-width: percentage($size / $column);\n}\n\n@mixin col-offset($size, $columns: $columns) {\n  $num: $size / $columns;\n  margin-left: if($num==0, 0, percentage($num));\n}\n\n.col {\n  position: relative;\n  width: 100%;\n  padding-right: $gutter-width / 2;\n  padding-left: $gutter-width / 2;\n}\n\n@mixin col-ready($gutter: $gutter-width) {\n  @extend .col;\n}\n\n//Gird Columns Width Responsive\n@mixin col($name: null, $columns: null, $breakpoint: null) {\n  @if $name==col {\n    @if ($breakpoint==sm, md, lg, xl, xxl) {\n      .#{$name}-#{$breakpoint}-#{$columns} {\n        @include col-ready();\n\n        @include media-up(#{$breakpoint}) {\n          @include column($columns);\n        }\n      }\n    } @else {\n      .#{$name}#{$columns} {\n        @include col-ready();\n      }\n    }\n  } @else {\n    .#{$name} {\n      @include col-ready();\n    }\n\n    .#{$breakpoint}-#{$columns} {\n      @include media-up(#{$breakpoint}) {\n        @include column($columns);\n      }\n    }\n  }\n}\n\n//Gird Columns Offset Width Responsive\n@mixin offset($name, $columns, $breakpoint: null) {\n  @if ($breakpoint==sm, md, lg, xl, xxl) {\n    .#{$name}-#{$breakpoint}-#{$columns} {\n      @include media-up($breakpoint) {\n        @include col-offset($columns);\n      }\n    }\n  } @else {\n    .#{$name}-#{$columns} {\n      @include col-offset($columns);\n    }\n  }\n}\n\n// Mixins for controlling flex.\n@mixin flex($name, $value, $breakpoint: null) {\n  @if $value==1 {\n    @if $breakpoint {\n      @include media-up($breakpoint) {\n        .#{$name} {\n          flex: 1 1 0%;\n        }\n      }\n    } @else {\n      .#{$name} {\n        flex: 1 1 0%;\n      }\n    }\n  } @else if $value==auto {\n    @if $breakpoint {\n      @include media-up($breakpoint) {\n        .#{$name} {\n          flex: 1 1 auto;\n        }\n      }\n    } @else {\n      .#{$name} {\n        flex: 1 1 auto;\n      }\n    }\n\n  } @else if $value==initial {\n    @if $breakpoint {\n      @include media-up($breakpoint) {\n        .#{$name} {\n          flex: 0 1 auto;\n        }\n      }\n    } @else {\n      .#{$name} {\n        flex: 0 1 auto;\n      }\n    }\n  } @else {\n    @if $breakpoint {\n      @include media-up($breakpoint) {\n        .#{$name} {\n          flex: none;\n        }\n      }\n    } @else {\n      .#{$name} {\n        flex: none;\n      }\n    }\n  }\n}\n\n// Controlling gutters between rows and columns.\n@mixin gap($size, $position: x) {\n  @if $position==y {\n    row-gap: $size;\n    grid-row-gap: $size;\n  } @else {\n    gap: $size;\n    grid-gap: $size;\n  }\n}\n\n/*--------------------------------------\n\t- Utilities\n----------------------------------------*/\n@mixin hover() {\n  &:hover {\n    @content;\n  }\n}\n\n@mixin focus() {\n  &:focus {\n    @content;\n  }\n}\n\n@mixin hover-focus() {\n\n  &:hover,\n  &:focus {\n    @content;\n  }\n}\n\n@mixin plain-hover-focus() {\n\n  &,\n  &:hover,\n  &:focus {\n    @content;\n  }\n}\n\n@mixin hover-focus-active() {\n  &:hover,\n  &:focus,\n  &:active {\n    @content;\n  }\n}\n\n@mixin before($content: null) {\n  @if $content {\n    &::before {\n      content: $content;\n      @content;\n    }\n  } @else {\n    &::before {\n      @content;\n    }\n  }\n}\n\n@mixin after($content: null) {\n  @if $content {\n    &::after {\n      content: $content;\n      @content;\n    }\n  } @else {\n    &::after {\n      @content;\n    }\n  }\n}\n\n@mixin before-after($content: null) {\n  @if $content {\n\n    &::before,\n    &::after {\n      content: $content;\n      @content;\n    }\n  } @else {\n\n    &::before,\n    &::after {\n      @content;\n    }\n  }\n}\n\n@mixin pseudo($args: top 0 left 0, $loca: before, $position: absolute, $content: \"\") {\n  @if ($loca==after) {\n    @include after($content) {\n      @if ($position==relative) {\n        @include relative($args);\n        @content;\n      } @else {\n        @include absolute($args);\n        @content;\n      }\n    }\n  } @else if ($loca==before-after) {\n    @include before-after($content) {\n      @if ($position==relative) {\n        @include relative($args);\n        @content;\n      } @else {\n        @include absolute($args);\n        @content;\n      }\n    }\n  } @else {\n    @include before($content) {\n      @if ($position==relative) {\n        @include relative($args);\n        @content;\n      } @else {\n        @include absolute($args);\n        @content;\n      }\n    }\n  }\n}\n\n//Create the mixin for theme colors\n@mixin color($name, $color) {\n  // Define colors in your theme\n  $primary: $color;\n  $bg-color: $color;\n\n  // Add your Prefix classes name\n  .text-#{$name} {\n    color: $primary !important;\n  }\n\n  .bg-#{$name} {\n    background: $primary;\n  }\n\n}\n\n// Gradient Color Mixin\n@mixin gradient($direction, $first, $last) {\n  background-color: $first;\n  background-image: linear-gradient($direction, $first 0%, $last 100%);\n}\n\n// Gradient Color Class Name with Mixin\n@mixin gradient-color($class, $direction, $first, $last) {\n  .#{$class} {\n    @include gradient($direction, $first, $last);\n  }\n}\n\n// Mixins for controlling the direction of flex items.\n@mixin flex-direction($name, $value, $breakpoint: null) {\n  @if $breakpoint {\n    @include media-up($breakpoint) {\n      .#{$name} {\n        flex-direction: $value;\n      }\n    }\n  } @else {\n    .#{$name} {\n      flex-direction: $value;\n    }\n  }\n}\n\n// Mixins for controlling how flex items wrap.\n@mixin flex-wrap($name, $value, $breakpoint: null) {\n  @if $breakpoint {\n    @include media-up($breakpoint) {\n      .#{$name} {\n        flex-wrap: $value;\n      }\n    }\n  } @else {\n    .#{$name} {\n      flex-wrap: $value;\n    }\n  }\n}\n\n// Mixins for controlling flex.\n@mixin flex($name, $value, $breakpoint: null) {\n  @if $value==1 {\n    @if $breakpoint {\n      @include media-up($breakpoint) {\n        .#{$name} {\n          flex: 1 1 0%;\n        }\n      }\n    } @else {\n      .#{$name} {\n        flex: 1 1 0%;\n      }\n    }\n  } @else if $value==auto {\n    @if $breakpoint {\n      @include media-up($breakpoint) {\n        .#{$name} {\n          flex: 1 1 auto;\n        }\n      }\n    } @else {\n      .#{$name} {\n        flex: 1 1 auto;\n      }\n    }\n\n  } @else if $value==initial {\n    @if $breakpoint {\n      @include media-up($breakpoint) {\n        .#{$name} {\n          flex: 0 1 auto;\n        }\n      }\n    } @else {\n      .#{$name} {\n        flex: 0 1 auto;\n      }\n    }\n  } @else {\n    @if $breakpoint {\n      @include media-up($breakpoint) {\n        .#{$name} {\n          flex: none;\n        }\n      }\n    } @else {\n      .#{$name} {\n        flex: none;\n      }\n    }\n  }\n}\n\n// Mixins for controlling how flex item grow.\n@mixin flex-grow($name, $value, $breakpoint: null) {\n  @if $value==0 {\n    @if $breakpoint {\n      @include media-up($breakpoint) {\n        .#{$name} {\n          flex-grow: 0;\n        }\n      }\n    } @else {\n      .#{$name} {\n        flex-grow: 0;\n      }\n    }\n  } @else {\n    @if $breakpoint {\n      @include media-up($breakpoint) {\n        .#{$name} {\n          flex-grow: 1;\n        }\n      }\n    } @else {\n      .#{$name} {\n        flex-grow: 1;\n      }\n    }\n  }\n}\n\n// Mixins for controlling how flex item shrink.\n@mixin flex-shrink($name, $value, $breakpoint: null) {\n  @if $value==0 {\n    @if $breakpoint {\n      @include media-up($breakpoint) {\n        .#{$name} {\n          flex-shrink: 0;\n        }\n      }\n    } @else {\n      .#{$name} {\n        flex-shrink: 0;\n      }\n    }\n  } @else {\n    @if $breakpoint {\n      @include media-up($breakpoint) {\n        .#{$name} {\n          flex-shrink: 1;\n        }\n      }\n    } @else {\n      .#{$name} {\n        flex-shrink: 1;\n      }\n    }\n  }\n}\n\n// The justify-content property.\n@mixin justify-content($name, $value, $breakpoint: null) {\n  @if $breakpoint {\n    @include media-up($breakpoint) {\n      .#{$name} {\n        justify-content: $value;\n      }\n    }\n  } @else {\n    .#{$name} {\n      justify-content: $value;\n    }\n  }\n}\n\n// The justify-items property.\n@mixin justify-items($name, $value, $breakpoint: null) {\n  @if $breakpoint {\n    @include media-up($breakpoint) {\n      .#{$name} {\n        justify-items: $value;\n      }\n    }\n  } @else {\n    .#{$name} {\n      justify-items: $value;\n    }\n  }\n}\n\n// The justify-self property.\n@mixin justify-self($name, $value, $breakpoint: null) {\n  @if $breakpoint {\n    @include media-up($breakpoint) {\n      .#{$name} {\n        justify-self: $value;\n      }\n    }\n  } @else {\n    .#{$name} {\n      justify-self: $value;\n    }\n  }\n}\n\n// The align-content property.\n@mixin align-content($name, $value, $breakpoint: null) {\n  @if $breakpoint {\n    @include media-up($breakpoint) {\n      .#{$name} {\n        align-content: $value;\n      }\n    }\n  } @else {\n    .#{$name} {\n      align-content: $value;\n    }\n  }\n}\n\n// The align-items property.\n@mixin align-items($name, $value, $breakpoint: null) {\n  @if $breakpoint {\n    @include media-up($breakpoint) {\n      .#{$name} {\n        align-items: $value;\n      }\n    }\n  } @else {\n    .#{$name} {\n      align-items: $value;\n    }\n  }\n}\n\n// The align-self property.\n@mixin align-self($name, $value, $breakpoint: null) {\n  @if $breakpoint {\n    @include media-up($breakpoint) {\n      .#{$name} {\n        align-self: $value;\n      }\n    }\n  } @else {\n    .#{$name} {\n      align-self: $value;\n    }\n  }\n}\n\n// The align-content property.\n@mixin align-content($name, $value, $breakpoint: null) {\n  @if $breakpoint {\n    @include media-up($breakpoint) {\n      .#{$name} {\n        align-content: $value;\n      }\n    }\n  } @else {\n    .#{$name} {\n      align-content: $value;\n    }\n  }\n}\n\n// margin Name with Mixin\n@mixin margin($name, $value) {\n\n  // Add your Prefix name\n  @if $name==mt {\n    @if $value==auto {\n      margin-top: #{$value};\n    } @else if $value==0 {\n      margin-top: #{$value};\n    } @else {\n      margin-top: #{$value};\n    }\n  } @else if $name==mb {\n    @if $value==auto {\n      margin-bottom: #{$value};\n    } @else if $value==0 {\n      margin-bottom: #{$value};\n    } @else {\n      margin-bottom: #{$value};\n    }\n  } @else if $name==ml {\n    @if $value==auto {\n      margin-left: #{$value};\n    } @else if $value==0 {\n      margin-left: #{$value};\n    } @else {\n      margin-left: #{$value};\n    }\n  } @else if $name==mr {\n    @if $value==auto {\n      margin-right: #{$value};\n    } @else if $value==0 {\n      margin-right: #{$value};\n    } @else {\n      margin-right: #{$value};\n    }\n  } @else if $name==mx {\n    @if $value==auto {\n      margin-left: #{$value};\n      margin-right: #{$value};\n    } @else if $value==0 {\n      margin-left: #{$value};\n      margin-right: #{$value};\n    } @else {\n      margin-left: #{$value};\n      margin-right: #{$value};\n    }\n  } @else if $name==my {\n    @if $value==auto {\n      margin-top: #{$value};\n      margin-bottom: #{$value};\n    } @else if $value==0 {\n      margin-top: #{$value};\n      margin-bottom: #{$value};\n    } @else {\n      margin-top: #{$value};\n      margin-bottom: #{$value};\n    }\n  } @else {\n    @if $value==auto {\n      margin: #{$value};\n    } @else if $value==0 {\n      margin: #{$value};\n    } @else {\n      margin: #{$value};\n    }\n  }\n}\n\n@mixin margin-rs($name, $breakpoint, $value) {\n\n  // Add your Prefix name\n  @if $name==mt {\n    @if $value==auto {\n      @include media-up(#{$breakpoint}) {\n        margin-top: #{$value};\n      }\n    } @else if $value==0 {\n      @include media-up(#{$breakpoint}) {\n        margin-top: #{$value};\n      }\n    } @else {\n      @include media-up(#{$breakpoint}) {\n        margin-top: #{$value};\n      }\n    }\n  } @else if $name==mb {\n    @if $value==auto {\n      @include media-up(#{$breakpoint}) {\n        margin-bottom: #{$value};\n      }\n    } @else if $value==0 {\n      @include media-up(#{$breakpoint}) {\n        margin-bottom: #{$value};\n      }\n    } @else {\n      @include media-up(#{$breakpoint}) {\n        margin-bottom: #{$value};\n      }\n    }\n  } @else if $name==ml {\n    @if $value==auto {\n      @include media-up(#{$breakpoint}) {\n        margin-left: #{$value};\n      }\n    } @else if $value==0 {\n      @include media-up(#{$breakpoint}) {\n        margin-left: #{$value};\n      }\n    } @else {\n      @include media-up(#{$breakpoint}) {\n        margin-left: #{$value};\n      }\n    }\n  } @else if $name==mr {\n    @if $value==auto {\n      @include media-up(#{$breakpoint}) {\n        margin-right: #{$value};\n      }\n    } @else if $value==0 {\n      @include media-up(#{$breakpoint}) {\n        margin-right: #{$value};\n      }\n    } @else {\n      @include media-up(#{$breakpoint}) {\n        margin-right: #{$value};\n      }\n    }\n  } @else if $name==mx {\n    @if $value==auto {\n      @include media-up(#{$breakpoint}) {\n        margin-left: #{$value};\n        margin-right: #{$value};\n      }\n    } @else if $value==0 {\n      @include media-up(#{$breakpoint}) {\n        margin-left: #{$value};\n        margin-right: #{$value};\n      }\n    } @else {\n      @include media-up(#{$breakpoint}) {\n        margin-left: #{$value};\n        margin-right: #{$value};\n      }\n    }\n  } @else if $name==my {\n    @if $value==auto {\n      @include media-up(#{$breakpoint}) {\n        margin-top: #{$value};\n        margin-bottom: #{$value};\n      }\n    } @else if $value==0 {\n      @include media-up(#{$breakpoint}) {\n        margin-top: #{$value};\n        margin-bottom: #{$value};\n      }\n    } @else {\n      @include media-up(#{$breakpoint}) {\n        margin-top: #{$value};\n        margin-bottom: #{$value};\n      }\n    }\n  } @else {\n    @if $value==auto {\n      @include media-up(#{$breakpoint}) {\n        margin: #{$value};\n      }\n    } @else if $value==0 {\n      @include media-up(#{$breakpoint}) {\n        margin: #{$value};\n      }\n    } @else {\n      @include media-up(#{$breakpoint}) {\n        margin: #{$value};\n      }\n    }\n  }\n}\n\n// margin Class Name with Mixin\n@mixin margin-class($name, $property, $value, $pre: $active-prefix) {\n\n  // Add your Prefix classes name\n  @if $property==mt {\n    @if $value==auto {\n      .#{$name} {\n        margin-top: #{$value};\n      }\n    } @else if $value==0 {\n      .#{$name} {\n        margin-top: #{$value};\n      }\n    } @else {\n      .#{$name} {\n        margin-top: #{$value}#{$pre};\n      }\n    }\n  } @else if $property==mb {\n    @if $value==auto {\n      .#{$name} {\n        margin-bottom: #{$value};\n      }\n    } @else if $value==0 {\n      .#{$name} {\n        margin-bottom: #{$value};\n      }\n    } @else {\n      .#{$name} {\n        margin-bottom: #{$value}#{$pre};\n      }\n    }\n  } @else if $property==ml {\n    @if $value==auto {\n      .#{$name} {\n        margin-left: #{$value};\n      }\n    } @else if $value==0 {\n      .#{$name} {\n        margin-left: #{$value};\n      }\n    } @else {\n      .#{$name} {\n        margin-left: #{$value}#{$pre};\n      }\n    }\n  } @else if $property==mr {\n    @if $value==auto {\n      .#{$name} {\n        margin-right: #{$value};\n      }\n    } @else if $value==0 {\n      .#{$name} {\n        margin-right: #{$value};\n      }\n    } @else {\n      .#{$name} {\n        margin-right: #{$value}#{$pre};\n      }\n    }\n  } @else if $property==mx {\n    @if $value==auto {\n      .#{$name} {\n        margin-left: #{$value};\n        margin-right: #{$value};\n      }\n    } @else if $value==0 {\n      .#{$name} {\n        margin-left: #{$value};\n        margin-right: #{$value};\n      }\n    } @else {\n      .#{$name} {\n        margin-left: #{$value}#{$pre};\n        margin-right: #{$value}#{$pre};\n      }\n    }\n  } @else if $property==my {\n    @if $value==auto {\n      .#{$name} {\n        margin-top: #{$value};\n        margin-bottom: #{$value};\n      }\n    } @else if $value==0 {\n      .#{$name} {\n        margin-top: #{$value};\n        margin-bottom: #{$value};\n      }\n    } @else {\n      .#{$name} {\n        margin-top: #{$value}#{$pre};\n        margin-bottom: #{$value}#{$pre};\n      }\n    }\n  } @else {\n    @if $value==auto {\n      .#{$name} {\n        margin: #{$value};\n      }\n    } @else if $value==0 {\n      .#{$name} {\n        margin: #{$value};\n      }\n    } @else {\n      .#{$name} {\n        margin: #{$value}#{$pre};\n      }\n    }\n  }\n}\n\n// Responsive margin Class Name with Mixin\n@mixin margin-class-rs($name, $property, $breakpoint, $value, $pre: $active-prefix) {\n\n  // Add your Prefix classe name\n  @if $property==mt {\n    @if $value==auto {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          margin-top: #{$value};\n        }\n      }\n    } @else if $value==0 {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          margin-top: #{$value};\n        }\n      }\n    } @else {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          margin-top: #{$value}#{$pre};\n        }\n      }\n    }\n  } @else if $property==mb {\n    @if $value==auto {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          margin-bottom: #{$value};\n        }\n      }\n    } @else if $value==0 {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          margin-bottom: #{$value};\n        }\n      }\n    } @else {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          margin-bottom: #{$value}#{$pre};\n        }\n      }\n    }\n  } @else if $property==ml {\n    @if $value==auto {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          margin-left: #{$value};\n        }\n      }\n    } @else if $value==0 {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          margin-left: #{$value};\n        }\n      }\n    } @else {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          margin-left: #{$value}#{$pre};\n        }\n      }\n    }\n  } @else if $property==pr {\n    @if $value==auto {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          margin-right: #{$value};\n        }\n      }\n    } @else if $value==0 {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          margin-right: #{$value};\n        }\n      }\n    } @else {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          margin-right: #{$value}#{$pre};\n        }\n      }\n    }\n  } @else if $property==mx {\n    @if $value==auto {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          margin-left: #{$value};\n          margin-right: #{$value};\n        }\n      }\n    } @else if $value==0 {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          margin-left: #{$value};\n          margin-right: #{$value};\n        }\n      }\n    } @else {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          margin-left: #{$value}#{$pre};\n          margin-right: #{$value}#{$pre};\n        }\n      }\n    }\n  } @else if $property==my {\n    @if $value==auto {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          margin-top: #{$value};\n          margin-bottom: #{$value};\n        }\n      }\n    } @else if $value==0 {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          margin-top: #{$value};\n          margin-bottom: #{$value};\n        }\n      }\n    } @else {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          margin-top: #{$value}#{$pre};\n          margin-bottom: #{$value}#{$pre};\n        }\n      }\n    }\n  } @else {\n    @if $value==auto {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          margin: #{$value};\n        }\n      }\n    } @else if $value==0 {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          margin: #{$value};\n        }\n      }\n    } @else {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          margin: #{$value}#{$pre};\n        }\n      }\n    }\n  }\n}\n\n// padding Name with Mixin\n@mixin padding($name, $value) {\n\n  // Add your Prefix name\n  @if $name==pt {\n    @if $value==auto {\n      padding-top: #{$value};\n    } @else if $value==0 {\n      padding-top: #{$value};\n    } @else {\n      padding-top: #{$value};\n    }\n  } @else if $name==pb {\n    @if $value==auto {\n      padding-bottom: #{$value};\n    } @else if $value==0 {\n      padding-bottom: #{$value};\n    } @else {\n      padding-bottom: #{$value};\n    }\n  } @else if $name==pl {\n    @if $value==auto {\n      padding-left: #{$value};\n    } @else if $value==0 {\n      padding-left: #{$value};\n    } @else {\n      padding-left: #{$value};\n    }\n  } @else if $name==pr {\n    @if $value==auto {\n      padding-right: #{$value};\n    } @else if $value==0 {\n      padding-right: #{$value};\n    } @else {\n      padding-right: #{$value};\n    }\n  } @else if $name==px {\n    @if $value==auto {\n      padding-left: #{$value};\n      padding-right: #{$value};\n    } @else if $value==0 {\n      padding-left: #{$value};\n      padding-right: #{$value};\n    } @else {\n      padding-left: #{$value};\n      padding-right: #{$value};\n    }\n  } @else if $name==py {\n    @if $value==auto {\n      padding-top: #{$value};\n      padding-bottom: #{$value};\n    } @else if $value==0 {\n      padding-top: #{$value};\n      padding-bottom: #{$value};\n    } @else {\n      padding-top: #{$value};\n      padding-bottom: #{$value};\n    }\n  } @else {\n    @if $value==auto {\n      padding: #{$value};\n    } @else if $value==0 {\n      padding: #{$value};\n    } @else {\n      padding: #{$value};\n    }\n  }\n}\n\n@mixin padding-rs($name, $breakpoint, $value) {\n\n  // Add your Prefix name\n  @if $name==pt {\n    @if $value==auto {\n      @include media-up(#{$breakpoint}) {\n        padding-top: #{$value};\n      }\n    } @else if $value==0 {\n      @include media-up(#{$breakpoint}) {\n        padding-top: #{$value};\n      }\n    } @else {\n      @include media-up(#{$breakpoint}) {\n        padding-top: #{$value};\n      }\n    }\n  } @else if $name==pb {\n    @if $value==auto {\n      @include media-up(#{$breakpoint}) {\n        padding-bottom: #{$value};\n      }\n    } @else if $value==0 {\n      @include media-up(#{$breakpoint}) {\n        padding-bottom: #{$value};\n      }\n    } @else {\n      @include media-up(#{$breakpoint}) {\n        padding-bottom: #{$value};\n      }\n    }\n  } @else if $name==pl {\n    @if $value==auto {\n      @include media-up(#{$breakpoint}) {\n        padding-left: #{$value};\n      }\n    } @else if $value==0 {\n      @include media-up(#{$breakpoint}) {\n        padding-left: #{$value};\n      }\n    } @else {\n      @include media-up(#{$breakpoint}) {\n        padding-left: #{$value};\n      }\n    }\n  } @else if $name==pr {\n    @if $value==auto {\n      @include media-up(#{$breakpoint}) {\n        padding-right: #{$value};\n      }\n    } @else if $value==0 {\n      @include media-up(#{$breakpoint}) {\n        padding-right: #{$value};\n      }\n    } @else {\n      @include media-up(#{$breakpoint}) {\n        padding-right: #{$value};\n      }\n    }\n  } @else if $name==px {\n    @if $value==auto {\n      @include media-up(#{$breakpoint}) {\n        padding-left: #{$value};\n        padding-right: #{$value};\n      }\n    } @else if $value==0 {\n      @include media-up(#{$breakpoint}) {\n        padding-left: #{$value};\n        padding-right: #{$value};\n      }\n    } @else {\n      @include media-up(#{$breakpoint}) {\n        padding-left: #{$value};\n        padding-right: #{$value};\n      }\n    }\n  } @else if $name==py {\n    @if $value==auto {\n      @include media-up(#{$breakpoint}) {\n        padding-top: #{$value};\n        padding-bottom: #{$value};\n      }\n    } @else if $value==0 {\n      @include media-up(#{$breakpoint}) {\n        padding-top: #{$value};\n        padding-bottom: #{$value};\n      }\n    } @else {\n      @include media-up(#{$breakpoint}) {\n        padding-top: #{$value};\n        padding-bottom: #{$value};\n      }\n    }\n  } @else {\n    @if $value==auto {\n      @include media-up(#{$breakpoint}) {\n        padding: #{$value};\n      }\n    } @else if $value==0 {\n      @include media-up(#{$breakpoint}) {\n        padding: #{$value};\n      }\n    } @else {\n      @include media-up(#{$breakpoint}) {\n        padding: #{$value};\n      }\n    }\n  }\n}\n\n// padding Class Name with Mixin\n@mixin padding-class($name, $property, $value, $pre: $active-prefix) {\n\n  // Add your Prefix classes name\n  @if $property==pt {\n    @if $value==auto {\n      .#{$name} {\n        padding-top: #{$value};\n      }\n    } @else if $value==0 {\n      .#{$name} {\n        padding-top: #{$value};\n      }\n    } @else {\n      .#{$name} {\n        padding-top: #{$value}#{$pre};\n      }\n    }\n  } @else if $property==pb {\n    @if $value==auto {\n      .#{$name} {\n        padding-bottom: #{$value};\n      }\n    } @else if $value==0 {\n      .#{$name} {\n        padding-bottom: #{$value};\n      }\n    } @else {\n      .#{$name} {\n        padding-bottom: #{$value}#{$pre};\n      }\n    }\n  } @else if $property==pl {\n    @if $value==auto {\n      .#{$name} {\n        padding-left: #{$value};\n      }\n    } @else if $value==0 {\n      .#{$name} {\n        padding-left: #{$value};\n      }\n    } @else {\n      .#{$name} {\n        padding-left: #{$value}#{$pre};\n      }\n    }\n  } @else if $property==pr {\n    @if $value==auto {\n      .#{$name} {\n        padding-right: #{$value};\n      }\n    } @else if $value==0 {\n      .#{$name} {\n        padding-right: #{$value};\n      }\n    } @else {\n      .#{$name} {\n        padding-right: #{$value}#{$pre};\n      }\n    }\n  } @else if $property==px {\n    @if $value==auto {\n      .#{$name} {\n        padding-left: #{$value};\n        padding-right: #{$value};\n      }\n    } @else if $value==0 {\n      .#{$name} {\n        padding-left: #{$value};\n        padding-right: #{$value};\n      }\n    } @else {\n      .#{$name} {\n        padding-left: #{$value}#{$pre};\n        padding-right: #{$value}#{$pre};\n      }\n    }\n  } @else if $property==py {\n    @if $value==auto {\n      .#{$name} {\n        padding-top: #{$value};\n        padding-bottom: #{$value};\n      }\n    } @else if $value==0 {\n      .#{$name} {\n        padding-top: #{$value};\n        padding-bottom: #{$value};\n      }\n    } @else {\n      .#{$name} {\n        padding-top: #{$value}#{$pre};\n        padding-bottom: #{$value}#{$pre};\n      }\n    }\n  } @else {\n    @if $value==auto {\n      .#{$name} {\n        padding: #{$value};\n      }\n    } @else if $value==0 {\n      .#{$name} {\n        padding: #{$value};\n      }\n    } @else {\n      .#{$name} {\n        padding: #{$value}#{$pre};\n      }\n    }\n  }\n}\n\n// Responsive padding Class Name with Mixin\n@mixin padding-class-rs($name, $property, $breakpoint, $value, $pre: $active-prefix) {\n\n  // Add your Prefix classe name\n  @if $property==pt {\n    @if $value==auto {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          padding-top: #{$value};\n        }\n      }\n    } @else if $value==0 {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          padding-top: #{$value};\n        }\n      }\n    } @else {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          padding-top: #{$value}#{$pre};\n        }\n      }\n    }\n  } @else if $property==pb {\n    @if $value==auto {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          padding-bottom: #{$value};\n        }\n      }\n    } @else if $value==0 {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          padding-bottom: #{$value};\n        }\n      }\n    } @else {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          padding-bottom: #{$value}#{$pre};\n        }\n      }\n    }\n  } @else if $property==pl {\n    @if $value==auto {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          padding-left: #{$value};\n        }\n      }\n    } @else if $value==0 {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          padding-left: #{$value};\n        }\n      }\n    } @else {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          padding-left: #{$value}#{$pre};\n        }\n      }\n    }\n  } @else if $property==pr {\n    @if $value==auto {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          padding-right: #{$value};\n        }\n      }\n    } @else if $value==0 {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          padding-right: #{$value};\n        }\n      }\n    } @else {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          padding-right: #{$value}#{$pre};\n        }\n      }\n    }\n  } @else if $property==px {\n    @if $value==auto {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          padding-left: #{$value};\n          padding-right: #{$value};\n        }\n      }\n    } @else if $value==0 {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          padding-left: #{$value};\n          padding-right: #{$value};\n        }\n      }\n    } @else {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          padding-left: #{$value}#{$pre};\n          padding-right: #{$value}#{$pre};\n        }\n      }\n    }\n  } @else if $property==py {\n    @if $value==auto {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          padding-top: #{$value};\n          padding-bottom: #{$value};\n        }\n      }\n    } @else if $value==0 {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          padding-top: #{$value};\n          padding-bottom: #{$value};\n        }\n      }\n    } @else {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          padding-top: #{$value}#{$pre};\n          padding-bottom: #{$value}#{$pre};\n        }\n      }\n    }\n  } @else {\n    @if $value==auto {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          padding: #{$value};\n        }\n      }\n    } @else if $value==0 {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          padding: #{$value};\n        }\n      }\n    } @else {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          padding: #{$value}#{$pre};\n        }\n      }\n    }\n  }\n}\n\n// Border \n@mixin border($type: null, $size: 1px, $style: solid, $color: $global-color) {\n  @if $type==top {\n    border#{-$type}: #{$size} #{$style} #{$color};\n  } @else if $type==bottom {\n    border#{-$type}: #{$size} #{$style} #{$color};\n  } @else if $type==left {\n    border#{-$type}: #{$size} #{$style} #{$color};\n  } @else if $type==right {\n    border#{-$type}: #{$size} #{$style} #{$color};\n  } @else if $type==by {\n    border-top: #{$size} #{$style} #{$color};\n    border-bottom: #{$size} #{$style} #{$color};\n  } @else if $type==bx {\n    border-left: #{$size} #{$style} #{$color};\n    border-right: #{$size} #{$style} #{$color};\n  } @else {\n    border: #{$size} #{$style} #{$color};\n  }\n}\n\n// Border \n@mixin border-class($type: null, $size: 1px, $style: solid, $color: $global-color) {\n\n  // Add your Prefix classes name\n  @if $type==top {\n    .border-#{$type} {\n      border#{-$type}: #{$size} #{$style} #{$color};\n    }\n  } @else if $type==bottom {\n    .border-#{$type} {\n      border#{-$type}: #{$size} #{$style} #{$color};\n    }\n  } @else if $type==left {\n    .border-#{$type} {\n      border#{-$type}: #{$size} #{$style} #{$color};\n    }\n  } @else if $type==right {\n    .border-#{$type} {\n      border#{-$type}: #{$size} #{$style} #{$color};\n    }\n  } @else {\n    .border {\n      border: #{$size} #{$style} #{$color};\n    }\n  }\n}\n\n// Border \n@mixin border-rs($breakpoint, $type: null, $size: 1px, $style: solid, $color: $global-color) {\n\n  // Add your Prefix classes name\n  @if $type==top {\n    .border-#{$breakpoint}-#{$type} {\n      @include media-up(#{$breakpoint}) {\n        border#{-$type}: #{$size} #{$style} #{$color};\n      }\n    }\n  } @else if $type==bottom {\n    .border-#{$breakpoint}-#{$type} {\n      @include media-up(#{$breakpoint}) {\n        border#{-$type}: #{$size} #{$style} #{$color};\n      }\n    }\n  } @else if $type==left {\n    .border-#{$breakpoint}-#{$type} {\n      @include media-up(#{$breakpoint}) {\n        border#{-$type}: #{$size} #{$style} #{$color};\n      }\n    }\n  } @else if $type==right {\n    .border-#{$breakpoint}-#{$type} {\n      @include media-up(#{$breakpoint}) {\n        border#{-$type}: #{$size} #{$style} #{$color};\n      }\n    }\n  } @else {\n    .border-#{$breakpoint} {\n      @include media-up(#{$breakpoint}) {\n        border: #{$size} #{$style} #{$color};\n      }\n    }\n  }\n}\n\n// Border Width\n@mixin border-width($type: null, $size: 1px) {\n  @if $type==top {\n    border#{-$type}-width: #{$size};\n  } @else if $type==right {\n    border#{-$type}-width: #{$size};\n  } @else if $type==bottom {\n    border#{-$type}-width: #{$size};\n  } @else if $type==left {\n    border#{-$type}-width: #{$size};\n  } @else {\n    border: #{$size};\n  }\n}\n\n// Border Color\n@mixin border-color($color: $global-color) {\n  border-color: #{$color};\n}\n\n// Border Style\n@mixin border-style($style: solid) {\n  border-style: #{$style};\n}\n\n// Border Radius Mixin\n@mixin radius($type: null, $size: 0) {\n  @if $type==top {\n    border#{-$type}-left-radius: #{$size};\n    border#{-$type}-right-radius: #{$size};\n  } @else if $type==right {\n    border-top-right-radius: #{$size};\n    border-bottom-right-radius: #{$size};\n  } @else if $type==bottom {\n    border#{-$type}-left-radius: #{$size};\n    border#{-$type}-right-radius: #{$size};\n  } @else if $type==left {\n    border-top-left-radius: #{$size};\n    border-bottom-left-radius: #{$size};\n  } @else {\n    border-radius: #{$size};\n  }\n}\n\n// Border Radius Class Mixin\n@mixin radius-class($type: null, $size: 0, $num: null) {\n  @if $type==top {\n    @if $num {\n      .radius-#{$type}-#{$num} {\n        border#{-$type}-left-radius: #{$size};\n        border#{-$type}-right-radius: #{$size};\n      }\n    } @else {\n      .radius-#{$type} {\n        border#{-$type}-left-radius: #{$size};\n        border#{-$type}-right-radius: #{$size};\n      }\n    }\n  } @else if $type==right {\n    @if $num {\n      .radius-#{$type}-#{$num} {\n        border-top-right-radius: #{$size};\n        border-bottom-right-radius: #{$size};\n      }\n    } @else {\n      .radius-#{$type} {\n        border-top-right-radius: #{$size};\n        border-bottom-right-radius: #{$size};\n      }\n    }\n  } @else if $type==bottom {\n    @if $num {\n      .radius-#{$type}-#{$num} {\n        border#{-$type}-left-radius: #{$size};\n        border#{-$type}-right-radius: #{$size};\n      }\n    } @else {\n      .radius-#{$type} {\n        border#{-$type}-left-radius: #{$size};\n        border#{-$type}-right-radius: #{$size};\n      }\n    }\n  } @else if $type==left {\n    @if $num {\n      .radius-#{$type}-#{$num} {\n        border-top-left-radius: #{$size};\n        border-bottom-left-radius: #{$size};\n      }\n    } @else {\n      .radius-#{$type} {\n        border-top-left-radius: #{$size};\n        border-bottom-left-radius: #{$size};\n      }\n    }\n  } @else {\n    @if $num {\n      .radius-#{$num} {\n        border-radius: #{$size};\n      }\n    } @else {\n      .radius {\n        border-radius: #{$size};\n      }\n    }\n  }\n}\n\n//Display mixin\n@mixin display($value) {\n  .d-#{$value} {\n    display: $value;\n  }\n}\n\n//Responsive Display Mixin\n@mixin display-rs($breakpoint, $value) {\n  .d-#{$breakpoint}-#{$value} {\n    @include media-up(#{$breakpoint}) {\n      display: #{$value};\n    }\n  }\n}\n\n@mixin padding-divide($name, $value: 0, $device: x, $div: false) {\n  @if $device==y {\n    .#{$name} {\n      @if $div==true {\n        div + div {\n          @include padding(py, $value);\n        }\n      } @else {\n        li + li {\n          @include padding(py, $value);\n        }\n      }\n    }\n  } @else {\n    .#{$name} {\n      @if $div==true {\n        div + div {\n          @include padding(pl, $value);\n        }\n      } @else {\n        li + li {\n          @include padding(pl, $value);\n        }\n      }\n    }\n  }\n}\n\n@mixin padding-divide-rs($name, $value: 0, $breakpoint: null, $divide: x, $div: false) {\n  @if $divide==y {\n    .#{$name} {\n      @include media-up($breakpoint) {\n        @if $div==true {\n          div + div {\n            @include padding(py, $value);\n          }\n        } @else {\n          li + li {\n            @include padding(py, $value);\n          }\n        }\n      }\n    }\n  } @else {\n    .#{$name} {\n      @include media-up($breakpoint) {\n        @if $div==true {\n          div + div {\n            @include padding(pl, $value);\n          }\n        } @else {\n          li + li {\n            @include padding(pl, $value);\n          }\n        }\n      }\n    }\n  }\n}\n\n//Overlay Mixin\n@mixin overlay($name, $width: 100%, $height: $width, $color: null, $direction: null, $gradient: null, $mode: null, $index: 999) {\n  .overlay {\n    overflow: hidden;\n    position: relative;\n    @include property;\n  }\n\n  @if $gradient {\n    .overlay-#{$name} {\n      &::before {\n        content: '';\n        @include absolute();\n        @include size($width, $height: $width);\n        @include property;\n        @include gradient($direction, $gradient);\n        @include overlay-mode($mode: $mode);\n        z-index: $index;\n      }\n    }\n  } @else {\n    .overlay-#{$name} {\n      &::before {\n        content: '';\n        @include absolute();\n        @include size($width, $height: $width);\n        @include property;\n        background: $color;\n        @include overlay-mode($mode: $mode);\n        z-index: $index;\n      }\n    }\n  }\n}\n\n//Overlay Opacity Mixin\n@mixin overlay-opacity($name, $opacity: 1) {\n  .overlay-#{$name} {\n    &::before {\n      opacity: $opacity;\n    }\n  }\n}\n\n//Overlay Mode Mixin\n@mixin overlay-mode($name: null, $mode: null) {\n  @if $name {\n    .overlay-#{$name} {\n      &::before {\n        mix-blend-mode: $mode;\n      }\n    }\n  } @else {\n    mix-blend-mode: $mode;\n  }\n\n}\n\n// Size \n@mixin size($width, $height: $width) {\n  width: $width;\n  height: $height;\n}\n\n//Position mixin\n@mixin position($position, $args) {\n  @each $o in top right bottom left inset {\n    $i: index($args, $o);\n\n    @if $i and $i+1 <=length($args) and type-of(nth($args, $i + 1))==number {\n      #{$o}: nth($args, $i + 1);\n    }\n  }\n\n  position: $position;\n}\n\n// Positioning helpers\n@mixin absolute($args: '') {\n  @include position(absolute, $args);\n}\n\n@mixin fixed($args: '') {\n  @include position(fixed, $args);\n}\n\n@mixin relative($args: '') {\n  @include position(relative, $args);\n}\n\n// Position Top/Right/Bottom/Left Alignment\n@mixin trbl($type, $value, $pre: null) {\n\n  @if $type==top {\n    .#{$type}-#{$value} {\n      top: #{$value}#{$pre};\n    }\n  } @else if $type==right {\n    .#{$type}-#{$value} {\n      right: #{$value}#{$pre};\n    }\n  } @else if $type==bottom {\n    .#{$type}-#{$value} {\n      bottom: #{$value}#{$pre};\n    }\n  } @else if $type==left {\n    .#{$type}-#{$value} {\n      left: #{$value}#{$pre};\n    }\n  }\n}\n\n// Position Top/Bottom/Left/Right Alignment\n@mixin position-align($name, $position: absolute) {\n\n  @if $name==center {\n    @if $position==relative {\n      .inset-#{$name} {\n        @include relative(top 50% left 50%);\n        transform: translate(-50%, -50%);\n      }\n    } @else {\n      .inset-#{$name} {\n        @include absolute(top 50% left 50%);\n        transform: translate(-50%, -50%);\n      }\n    }\n  } @else if $name==tl-center {\n    @if $position==relative {\n      .#{$name} {\n        @include relative(top 50% left 0);\n        transform: translateY(-50%);\n      }\n    } @else {\n      .#{$name} {\n        @include absolute(top 50% left 0);\n        transform: translateY(-50%);\n      }\n    }\n  } @else if $name==tr-center {\n    @if $position==relative {\n      .#{$name} {\n        @include relative(top 50% right 0);\n        transform: translateY(-50%);\n      }\n    } @else {\n      .#{$name} {\n        @include absolute(top 50% right 0);\n        transform: translateY(-50%);\n      }\n    }\n  } @else if $name==top-right {\n    @if $position==relative {\n      .#{$name} {\n        @include relative(top 0 right 0);\n      }\n    } @else {\n      .#{$name} {\n        @include absolute(top 0 right 0);\n      }\n    }\n  } @else if $name==bl-center {\n    @if $position==relative {\n      .#{$name} {\n        @include relative(bottom 0 left 50%);\n        transform: translateY(-50%);\n      }\n    } @else {\n      .#{$name} {\n        @include absolute(bottom 0 left 50%);\n        transform: translateX(-50%);\n      }\n    }\n  } @else if $name==bottom-left {\n    @if $position==relative {\n      .#{$name} {\n        @include relative(bottom 0 left 0);\n      }\n    } @else {\n      .#{$name} {\n        @include relative(bottom 0 left 0);\n      }\n    }\n  } @else if $name==bottom-right {\n    @if $position==relative {\n      .#{$name} {\n        @include relative(bottom 0 right 0);\n      }\n    } @else {\n      .#{$name} {\n        @include relative(bottom 0 right 0);\n      }\n    }\n  }\n\n}\n\n// Box Shadow Mixin\n@mixin shadow($x: 0, $y: 0, $b: 0, $color: $black, $opacity: 1) {\n  -webkit-box-shadow: $x $y $b 0 rgba($color: $color, $alpha: $opacity);\n  -moz-box-shadow: $x $y $b 0 rgba($color: $color, $alpha: $opacity);\n  box-shadow: $x $y $b 0 rgba($color: $color, $alpha: $opacity);\n}\n\n//Text mixin\n@mixin text-align($value: left, $breakpoint: null, $name: null) {\n  @if $name {\n    @if $breakpoint {\n      .#{$name} {\n        @include media-up(#{$breakpoint}) {\n          text-align: $value;\n        }\n      }\n    } @else {\n      .#{$name} {\n        text-align: $value;\n      }\n    }\n  } @else {\n    @if $breakpoint {\n      .text-#{$breakpoint}-#{$value} {\n        @include media-up(#{$breakpoint}) {\n          text-align: $value;\n        }\n      }\n    } @else {\n      .text-#{$value} {\n        text-align: $value;\n      }\n    }\n  }\n}\n\n// prefix declarations\n@mixin prefixed($property, $value) {\n  @if $webkit==true {\n    -webkit-#{$property}: #{$value};\n  }\n\n  @if $moz==true {\n    -moz-#{$property}: #{$value};\n  }\n\n  @if $ms==true {\n    -ms-#{$property}: #{$value};\n  }\n\n  @if $o==true {\n    -o-#{$property}: #{$value};\n  }\n\n  #{$property}: #{$value};\n}\n\n// prefix keyframes\n@mixin keyframes($name) {\n  @if $webkit==true {\n    @-webkit-keyframes #{$name} {\n      @content;\n    }\n  }\n\n  @if $moz==true {\n    @-moz-keyframes #{$name} {\n      @content;\n    }\n  }\n\n  @if $ms==true {\n    @-ms-keyframes #{$name} {\n      @content;\n    }\n  }\n\n  @if $o==true {\n    @-o-keyframes #{$name} {\n      @content;\n    }\n  }\n\n  @keyframes #{$name} {\n    @content;\n  }\n}\n\n@mixin property($value: 0.3s) {\n  // Improve performance on mobile/tablet devices\n  // Perspective reduces blurriness of text in Chrome\n  @include prefixed(transition, #{$value} ease-out);\n}\n\n@mixin transform($name: translate, $value: 0) {\n  // Improve performance on mobile/tablet devices\n  // Perspective reduces blurriness of text in Chrome\n  @include prefixed(transform, #{$name}(#{$value}));\n}\n\n// --------------------------------------\n//\t- Component\n// ----------------------------------------\n// CSS Triangle\n@mixin triangle($direction: top, $width: 50px, $height: $width, $color: $global-color) {\n  $half: $width / 2;\n\n  @if ($direction == top) {\n    width: 0;\n    height: 0;\n    border-style: solid;\n    border-width: 0 $half $height $half;\n    border-color: transparent transparent $color transparent;\n    display: block;\n  }\n\n  @if ($direction == right) {\n    width: 0;\n    height: 0;\n    border-style: solid;\n    border-width: $half 0 $half $height;\n    border-color: transparent transparent transparent $color;\n    display: block;\n  }\n\n  @if ($direction==bottom) {\n    width: 0;\n    height: 0;\n    border-style: solid;\n    border-width: $height $half 0 $half;\n    border-color: $color transparent transparent transparent;\n    display: block;\n  }\n\n  @if ($direction==left) {\n    width: 0;\n    height: 0;\n    border-style: solid;\n    border-width: $half $height $half 0;\n    border-color: transparent $color transparent transparent;\n    display: block;\n  }\n\n  @if ($direction==top-left) {\n    width: 0;\n    height: 0;\n    border-style: solid;\n    border-width: $width $width 0 0;\n    border-color: $color transparent transparent transparent;\n    display: block;\n  }\n\n  @if ($direction==top-right) {\n    width: 0;\n    height: 0;\n    border-style: solid;\n    border-width: 0 $width $width 0;\n    border-color: transparent $color transparent transparent;\n    display: block;\n  }\n\n  @if ($direction==bottom-left) {\n    width: 0;\n    height: 0;\n    border-style: solid;\n    border-width: $width 0 0 $width;\n    border-color: transparent transparent transparent $color;\n    display: block;\n  }\n\n  @if ($direction==bottom-right) {\n    width: 0;\n    height: 0;\n    border-style: solid;\n    border-width: 0 0 $width $width;\n    border-color: transparent transparent $color transparent;\n    display: block;\n  }\n}\n\n// Nav Menu Mixin\n@mixin nav($li: inline-block, $position: relative, $ff: $font, $fs: 1rem, $fw: 400, $color: $global-color, $bg: transparent, $tt: capitalize, $td: none, $py: 0.625rem, $px: .5rem, $pt: null, $pr: null, $pb: null, $pl: null, $my: null, $mx: null, $mt: null, $mr: null, $mb: null, $ml: null, $display: block, $index: 99, $h-color: $color, $h-bg: $bg, $h-fw: null, $h-py: $py, $h-px: $px, $h-pt: $pt, $h-pr: $pr, $h-pb: $pb, $h-pl: $pl, $h-my: null, $h-mx: null, $h-mt: $mt, $h-mr: $mr, $h-mb: $mb, $h-ml: $ml, $h-td: none) {\n\n  ul {\n    margin: 0;\n  }\n\n  li {\n    display: $li;\n\n    a {\n      position: $position;\n      font-family: $ff;\n      font-size: $fs;\n      font-weight: $fw;\n      color: $color;\n      background: $bg;\n      text-transform: $tt;\n      text-decoration: $td;\n      padding: $py $px;\n\n      @if ($pt $pr $pb $pl) {\n        padding-top: $pt;\n        padding-right: $pr;\n        padding-bottom: $pb;\n        padding-left: $pl;\n      }\n\n      margin: $my $mx;\n\n      @if ($mt $mr $mb $ml) {\n        margin-top: $mt;\n        margin-right: $mr;\n        margin-bottom: $mb;\n        margin-left: $ml;\n      }\n\n      display: $display;\n      z-index: $index;\n\n      @if $h-color {\n        @include hover {\n          color: $h-color;\n          background: $h-bg;\n          font-weight: $h-fw;\n          padding: $h-py $h-px;\n\n          @if ($h-pt $h-pr $h-pb $h-pl) {\n            padding-top: $h-pt;\n            padding-right: $h-pr;\n            padding-bottom: $h-pb;\n            padding-left: $h-pl;\n          }\n\n          margin: $h-my $h-mx;\n\n          @if ($h-mt $h-mr $h-mb $h-ml) {\n            margin-top: $h-mt;\n            margin-right: $h-mr;\n            margin-bottom: $h-mb;\n            margin-left: $h-ml;\n          }\n\n          text-decoration: $h-td;\n        }\n      }\n    }\n  }\n}\n\n// Nav Tabs Mixin\n@mixin nav-tabs($name, $ff: $font, $fw: 400, $fs: 16px, $lh: null, $color: $global-color, $bg: null, $tt: capitalize, $p-name: null, $p-value:null, $m-name: null, $m-value:null, $h-color: null, $h-bg: null, $breakpoint: null, $b-fs: null, $b-p-name: null, $b-p-value:null, $b-m-name: null, $b-m-value:null) {\n  .#{$name} {\n    display: block;\n    font-family: $ff;\n    font-weight: $fw;\n    font-size: $fs;\n    line-height: $lh;\n    color: $color;\n    text-transform: $tt;\n    @include padding($p-name, $p-value);\n    @include margin($m-name, $m-value);\n\n    @if $breakpoint {\n      @include media-up($breakpoint) {\n        font-size: $b-fs;\n        @include padding($b-p-name, $b-p-value);\n        @include margin($b-m-name, $b-m-value);\n      }\n    }\n\n    &:hover {\n      color: $h-color;\n      background: $h-bg;\n    }\n\n    // Disabled state lightens text\n    &.disabled {\n      color: $nav-link-disabled-color;\n      pointer-events: none;\n      cursor: default;\n    }\n  }\n}\n\n// Button mixin\n@mixin btn($fs: var(--btn-fs), $ff: var(--btn-ff), $fw: var(--fw-400), $lh: 1.5, $tt: capitalize, $td: none, $py: var(--btn-py), $px: var(--btn-px), $my: var(--btn-mx), $mx: var(--btn-mx), $bg: var(--btn-bg), $border-width: var(--border-width), $border-style: var(--border-style), $border-color: $bg, $radius: var(--btn-radius, var(--radius)), $display: inline-block, $position: relative) {\n  position: $position;\n  font-family: $ff;\n  font-size: $fs;\n  font-weight: $fw;\n  line-height: $lh;\n  background: var(--btn-bg);\n  color: var(--btn-clr);\n  border: var(--btn-bw, #{$border-width}) var(--btn-bs, #{$border-style}) var(--btn-bc, #{$border-color});\n  text-transform: $tt;\n  text-decoration: $td;\n  border-radius: $radius;\n  padding: $py $px;\n  margin: $my $mx;\n  display: $display;\n  overflow: hidden;\n  text-align: center;\n  cursor: pointer;\n  @include property;\n}\n\n// Button Color\n@mixin btn-color($bg: var(--clr-black), $color: var(--clr-white), $border-color: $bg, $h-color: $bg, $h-bg: transparent, $h-border-color: $h-color, $f-width: 0.4rem, $f-color: #000000, $f-opacity: 0.25) {\n  --btn-bg: #{$bg};\n  --btn-clr: #{$color};\n  --btn-bc: #{$border-color};\n\n  @if $h-bg {\n    @include hover {\n      --btn-clr: #{$h-color};\n      --btn-bg: #{$h-bg};\n      --btn-bc: #{$h-border-color};\n    }\n  }\n\n  @include focus {\n    outline: 0;\n    box-shadow: 0 0 0 $f-width rgba($f-color, 0.5);\n  }\n}\n\n//Button hover color\n@mixin btn-hover($h-color: var(--clr-black), $h-bg: transparent, $h-border-color: $h-color, $f-width: 0.4rem, $f-color: #000000, $f-opacity: 0.25) {\n  @if $h-bg {\n    @include hover {\n      --btn-clr: #{$h-color};\n      --btn-bg: #{$h-bg};\n      --btn-bc: #{$h-border-color};\n    }\n  }\n\n  @include focus {\n    outline: 0;\n    box-shadow: 0 0 0 $f-width rgba($f-color, 0.5);\n  }\n}\n\n@mixin btn-outline($color: var(--btn-clr), $h-color: var(--clr-white), $h-bg: $color, $border-color: $color, $h-border-color: $h-bg, $f-width: 0.4rem, $f-color: $color, $f-opacity: 0.5) {\n  --btn-clr: #{$color};\n  --btn-bc: #{$border-color};\n\n  @include hover {\n    --btn-clr: #{$h-color};\n    --btn-bg: #{$h-bg};\n    --btn-bc: #{$h-border-color};\n  }\n\n  @include focus {\n    outline: 0;\n    box-shadow: 0 0 0 $f-width rgba($f-color, 0.5);\n  }\n}\n\n\n// Form Input mixin \n@mixin form-input($ff: $font, $fs: inherit, $fw: null, $lh: null, $color: $global-color, $bg: transparent, $opacity: 1, $tt: capitalize, $py: 1rem, $px: 1.25rem, $my: 0, $mx: 0, $width: 100%, $max-width: null, $height: auto, $border-type: null, $border-size: 1px, $border-style: solid, $border-color: $global-color, $radius-type: null, $radius-size: 0, $shadow: null, $focus: false, $f-fw: null, $f-color: $color, $f-bg: null, $f-opacity: 1, $f-border-type: null, $f-border-size: $border-size, $f-border-style: $border-style, $f-border-color: $black, $f-radius-type: null, $f-radius-size: null, $f-shadow: null) {\n\n  font-family: $ff;\n  font-size: $fs;\n  font-weight: $fw;\n  line-height: $lh;\n  color: rgba($color, $opacity);\n  background: $bg;\n  text-transform: $tt;\n  padding: $py $px;\n  margin: $my $mx;\n  @include size($width, $height);\n  max-width: $max-width;\n  @include border($border-type, $border-size, $border-style, $border-color);\n  @include radius($radius-type, $radius-size);\n  box-shadow: $shadow;\n  @include property;\n\n  @if $focus==true {\n    &:focus {\n      outline: none;\n      font-weight: $f-fw;\n      color: rgba($f-color, $f-opacity);\n      background: $f-bg;\n      @include border($f-border-type, $f-border-size, $f-border-style, $f-border-color);\n      @include radius($f-radius-type, $f-radius-size);\n      box-shadow: $f-shadow;\n    }\n  } @else {\n    @include focus {\n      outline: none;\n    }\n  }\n\n}\n\n// Form Textarea mixin \n@mixin textarea($fs: null, $fw: null, $lh: null, $color: $global-color, $bg: transparent, $opacity: 1, $tt: capitalize, $py: 15px, $px: 20px, $my: 0.9375rem, $mx: 0, $width: 100%, $max-width: null, $height: auto, $border-type: null, $border-size: 1px, $border-style: solid, $border-color: transparent, $radius-type: null, $radius-size: 0, $shadow: null, $focus: false, $f-fw: null, $f-color: $color, $f-opacity: 1, $f-border-type: null, $f-border-size: $border-size, $f-border-style: $border-style, $f-border-color: $border-color, $f-radius-type: null, $f-radius-size: null, $f-shadow: null) {\n\n  font-size: $fs;\n  font-weight: $fw;\n  line-height: $lh;\n  padding: $py $px;\n  margin: $my $mx;\n  color: rgba($color, $opacity);\n  background: $bg;\n  text-transform: $tt;\n  @include size($width, $height);\n  max-width: $max-width;\n  @include border($border-type, $border-size, $border-style, $border-color);\n  @include radius($radius-type, $radius-size);\n  box-shadow: $shadow;\n  @include property;\n\n  @if $focus==true {\n    &:focus {\n      font-weight: $f-fw;\n      color: rgba($f-color, $f-opacity);\n      @include border($f-border-type, $f-border-size, $f-border-style, $f-border-color);\n      @include radius($f-radius-type, $f-radius-size);\n      box-shadow: $f-shadow;\n    }\n  }\n}\n\n// Dropdown Menu Mixin\n@mixin dropdown-menu($position:top 100% left 0, $width: 100%, $max-width: null, $padding: 15px, $m-name: mx, $m-value: auto, $fs: 16px, $a-color: $global-color, $a-padding: 0.625rem, $a-margin: 5px, $align: left, $index: 99, $radius: null, $shadow: null, $hover-bg: $black, $hover-color: $white) {\n  @include absolute($position);\n  width: $width;\n\n  @if $max-width {\n    max-width: $max-width;\n    @include margin($m-name, $m-value);\n  }\n\n  padding: $padding;\n  text-align: $align;\n  z-index: $index;\n  border-radius: $radius;\n  box-shadow: $shadow;\n  opacity: 0;\n  visibility: hidden;\n\n  li {\n    display: block;\n\n    a {\n      color: $a-color;\n      font-size: $fs;\n      border-radius: $radius;\n      padding: $a-padding;\n      margin-bottom: $a-margin;\n      display: block;\n\n      &:hover {\n        background: $hover-bg;\n        color: $hover-color;\n      }\n    }\n  }\n}\n\n// Social Link\n@mixin social($name, $display: inline-block, $m-type: ml, $m-size: .75rem, $before: false, $divide-li: false, $before-content: '', $position: null, $before-width: 1px, $before-height: 20px, $before-bg: $global-color, $fs: 20px, $bg: transparent, $color: $global-color, $width: null, $height: $width, $lh: $width, $b-type: null, $b-size: 1px, $b-style: solid, $b-color: transparent, $radius: null, $p-name: null, $p-value: null, $shadow-x: null, $shadow-y: null, $shadow-b: null, $shadow-color: $color, $shadow-opacity: 1, $h-bg: null, $h-color: $color, $hb-type: $b-type, $hb-size: $b-size, $hb-style: $b-style, $hb-color: $b-color, $hs-x: null, $hs-y: null, $hs-b: null, $hs-color: $color, $hs-opacity: 1) {\n  .#{$name} {\n    li {\n      + li {\n        @include margin($m-type, $m-size);\n      }\n\n      position: relative;\n\n      @if $display==inline-flex {\n        display: inline-flex;\n        flex-wrap: wrap;\n      } @else {\n        display: $display;\n      }\n\n      @if $before==true {\n        @if $divide-li==true {\n          & + li {\n            &::before {\n              content: $before-content;\n              @include absolute($position);\n              @include size($before-width, $before-height);\n              background: $before-bg;\n            }\n          }\n        } @else {\n          &::before {\n            content: $before-content;\n            @include absolute($position);\n            @include size($before-width, $before-height);\n            background: $before-bg;\n          }\n        }\n      }\n\n      a {\n        font-size: $fs;\n        line-height: $lh;\n        background: $bg;\n        color: $color;\n        display: block;\n        text-align: center;\n        @include size($width, $height);\n        @include border($b-type, $b-size, $b-style, $b-color);\n        @include radius($size: $radius);\n        @include property;\n\n        @if $p-name {\n          @include padding($p-name, $p-value);\n        }\n\n        @if $shadow-color==true {\n          @include shadow($shadow-x, $shadow-y, $shadow-b, $shadow-color, $shadow-opacity);\n        }\n\n        @if $h-bg {\n          @include hover {\n            background: $h-bg;\n            color: $h-color;\n\n            @if $hb-color {\n              @include border($hb-type, $hb-size, $hb-style, $hb-color);\n            }\n\n            @if $hs-color {\n              @include shadow($hs-x, $hs-y, $hs-b, $hs-color, $hs-opacity);\n            }\n          }\n        } @else {\n          @include hover {\n            color: $h-color;\n          }\n        }\n      }\n    }\n  }\n}\n\n//Owl Carousel Nav\n@mixin owl-nav($name: null, $fs: 20px, $bg: transparent, $color: $global-color, $position: null, $width: 50px, $height: $width, $lh: null, $radius: 0, $border: 2px solid $global-color, $transform: null, $p: 0, $owl-prev-left: null, $owl-prev-right: null, $owl-next-left: null, $owl-next-right: null, $h-bg: null, $h-color: null, $h-border: null) {\n  @if $name {\n    .#{$name} {\n      button {\n        @include absolute($position);\n        @include size($width, $height);\n        font: inherit;\n        font-size: $fs;\n        background: $bg;\n        color: $color;\n        line-height: $lh;\n        border-radius: $radius;\n        border: $border;\n        transform: $transform;\n        padding: $p;\n        cursor: pointer;\n        @include property;\n\n        &.owl-prev {\n          left: $owl-prev-left;\n          right: $owl-prev-right;\n        }\n\n        &.owl-next {\n          left: $owl-next-left;\n          right: $owl-next-right;\n        }\n\n        &:focus {\n          outline: none;\n        }\n\n        &:hover {\n          background: $h-bg;\n          color: $h-color;\n          border: $h-border;\n        }\n      }\n    }\n  } @else {\n    .owl-nav {\n      button {\n        @include absolute($position);\n        @include size($width, $height);\n        font: inherit;\n        font-size: $fs;\n        background: $bg;\n        color: $color;\n        line-height: $lh;\n        border-radius: $radius;\n        border: $border;\n        transform: $transform;\n        padding: $p;\n        cursor: pointer;\n        @include property;\n\n        &.owl-prev {\n          left: $owl-prev-left;\n          right: $owl-prev-right;\n        }\n\n        &.owl-next {\n          left: $owl-next-left;\n          right: $owl-next-right;\n        }\n\n        &:focus {\n          outline: none;\n        }\n\n        &:hover {\n          background: $h-bg;\n          color: $h-color;\n          border: $h-border;\n        }\n      }\n    }\n  }\n}\n\n// OWl Carousel Dots \n@mixin owl-dots($dots-position: left 50% bottom 0, $translateX: -50%, $translateY: -50%, $width: 8px, $height: $width, $display: inline-block, $text-center: center, $bg: $global-color, $border-size: 1px, $border-style: solid, $border-color: transparent, $radius-type: null, $radius-size: 50%, $p-name: null, $p-value: .25rem, $m-name: ml, $m-value: .5rem, $before: false, $b-content: '', $b-position: left -9px top -9px, $b-width: 25px, $b-height: $b-width, $b-radius-type: null, $b-radius-size: 50%, $b-border: 1px solid $global-color, $active: true, $a-width: $width, $a-height: $height, $a-bg: $bg, $a-border-size: 1px, $a-border-style: solid, $a-border-color: transparent, $active-before: false, $ab-content: '', $ab-position: left -9px top -9px, $ab-width: 25px, $ab-height: $ab-width, $ab-border: 2px solid $global-color, $ab-radius-type: null, $ab-radius-size: 50%) {\n\n  @include absolute($dots-position);\n  text-align: $text-center;\n\n  @if $translateY==true {\n    transform: translateY($translateY);\n  } @else {\n    transform: translateX($translateX);\n  }\n\n  button {\n    position: relative;\n    @include size($width, $height);\n    display: $display;\n    background: $bg;\n    @include border(null, $border-size, $border-style, $border-color);\n    @include radius($radius-type, $radius-size);\n    @include padding($p-name, $p-value);\n    @include margin($m-name, $m-value);\n\n    @if $before==true {\n      &::before {\n        content: $b-content;\n        @include absolute($b-position);\n        @include size($b-width, $b-height);\n        @include radius($b-radius-type, $b-radius-size);\n        border: $b-border;\n      }\n    }\n\n    @if $active==true {\n      &.active {\n        @include size($a-width, $a-height);\n        background: $a-bg;\n        @include border(null, $a-border-size, $a-border-style, $a-border-color);\n\n        @if $active-before==true {\n          &::before {\n            content: $ab-content;\n            @include absolute($ab-position);\n            @include size($ab-width, $ab-height);\n            @include radius($ab-radius-type, $ab-radius-size);\n            border: $ab-border;\n          }\n        }\n      }\n    }\n\n    @include focus {\n      outline: none;\n    }\n  }\n}\n\n// Footer Menu \n@mixin footer-menu($size: 18px, $color: $black, $padding: 10px, $opacity: 1, $display: block, $tt: capitalize, $td: none, $h-color: $black, $h-td: none) {\n  li {\n    a {\n      font-size: $size;\n      color: $color;\n      opacity: $opacity;\n      padding-bottom: $padding;\n      display: $display;\n      text-transform: $tt;\n      text-decoration: $td;\n\n      @include hover {\n        color: $h-color;\n        text-decoration: $h-td;\n      }\n    }\n  }\n}\n\n// Footer Widget \n@mixin footer-widget($value, $weight: 600, $prefix: top, $padding: 0) {\n  h3 {\n    font-size: $value;\n    padding-#{$prefix}: $padding;\n    font-weight: $weight;\n  }\n\n  @include footer-menu;\n}\n\n//Extra Small Screen Only\n@mixin xs {\n  @media screen and (max-width: 767px) {\n    @content;\n  }\n}\n\n//Small Screen\n@mixin xsm {\n  @media screen and (min-width: 425px) {\n    @content;\n  }\n}\n\n//Small Screen\n@mixin sm {\n  @media screen and (min-width: 576px) {\n    @content;\n  }\n}\n\n//Medium Screen\n@mixin md {\n  @media screen and (min-width: 768px) {\n    @content;\n  }\n}\n\n//Large Screen\n@mixin lg {\n  @media screen and (min-width: 992px) {\n    @content;\n  }\n}\n\n//Extra Large Screen\n@mixin xl {\n  @media screen and (min-width: 1200px) {\n    @content;\n  }\n}\n\n//Desktop Screen\n@mixin xxl {\n  @media screen and (min-width: 1441px) {\n    @content;\n  }\n}",":root {\n  // Responsive Container Width\n  --container-width: 100%;\n  --container-sm: 33.75rem;\n  --container-md: 45rem;\n  --container-lg: 60rem;\n  --container-xl: 71.25rem;\n  --container-xxl: 90rem;\n  --container-fluid: 100%;\n\n  // Gutters\n  --gutter-x: 1.875rem;\n  --gutter-3: 0.125rem;\n  --gutter-5: 0.225rem;\n  --gutter-10: 0.625rem;\n  --gutter-15: 0.9375rem;\n  --gutter-20: 1.25rem;\n  --gutter-25: 1.5625rem;\n  --gutter-30: 1.875rem;\n  --gutter-32: 2rem;\n  --gutter-35: 2.1875rem;\n  --gutter-40: 2.5rem;\n  --gutter-45: 2.8125rem;\n  --gutter-50: 3.125rem;\n\n  //Font Family\n  --ff-roboto: \"Roboto\", sans-serif;\n  ;\n\n  // Font Weight\n  --fw-100: 100;\n  --fw-200: 200;\n  --fw-300: 300;\n  --fw-400: 400;\n  --fw-500: 500;\n  --fw-600: 600;\n  --fw-700: 700;\n  --fw-800: 800;\n  --fw-900: 900;\n\n  // Font Size\n  --fs-12: 0.75rem;\n  --fs-13: 0.8125rem;\n  --fs-14: 0.875rem;\n  --fs-15: 0.9375rem;\n  --fs-16: 1rem;\n  --fs-17: 1.0625rem;\n  --fs-18: 1.125rem;\n  --fs-20: 1.25rem;\n  --fs-21: 1.3125rem;\n  --fs-24: 1.5rem;\n  --fs-25: 1.5625rem;\n  --fs-28: 1.75rem;\n  --fs-30: 1.875rem;\n  --fs-32: 2rem;\n  --fs-35: 2.1875rem;\n  --fs-40: 2.5rem;\n  --fs-45: 2.8125rem;\n\n  // hr\n  --hr-bg: var(--clr-black);\n  --hr-width: 100%;\n  --hr-height: 0.3125rem;\n  --hr-gutter-y: 1.875rem;\n  --hr-gutter-x: 0;\n  --hr-padding: 0;\n  --hr-radius: 0;\n\n  // Margin\n  --m: 0;\n  --mt: 0;\n  --mr: 0;\n  --mb: 0;\n  --ml: 0;\n  --mx: 0;\n  --my: 0;\n  --m-auto: auto;\n  --my-auto: auto;\n  --mx-auto: auto;\n\n  // Padding\n  --p: 0;\n  --pt: 0;\n  --pr: 0;\n  --pb: 0;\n  --pl: 0;\n  --px: 0;\n  --py: 0;\n  --p-auto: auto;\n  --py-auto: auto;\n  --px-auto: auto;\n\n  // Border\n  --border-width: 0.0625rem;\n  --border-style: solid;\n  --border-clr: transparent;\n  --border: var(--border-width) var(--border-style) var(--border-clr);\n  --border-t: var(--border-width) var(--border-style) var(--border-clr);\n  --border-r: var(--border-width) var(--border-style) var(--border-clr);\n  --border-b: var(--border-width) var(--border-style) var(--border-clr);\n  --border-l: var(--border-width) var(--border-style) var(--border-clr);\n  --border-x: var(--border-width) var(--border-style) var(--border-clr);\n  --border-y: var(--border-width) var(--border-style) var(--border-clr);\n\n  // Border Radius\n  --radius: 0;\n  --radius-t: 0;\n  --radius-r: 0;\n  --radius-b: 0;\n  --radius-l: 0;\n  --radius-full: 50%;\n\n  // Button Component\n  --btn-bg: transparent;\n  --btn-clr: inherit;\n  --btn-ff: var(--ff-roboto);\n  --btn-fs: var(--fs-15);\n  --btn-py: 0.625rem;\n  --btn-px: 1.125rem;\n  --btn-my: var(--my);\n  --btn-mx: var(--mx);\n\n  // Color\n  --clr-black: #000;\n  --clr-black-100: #0D0E2B;\n  --clr-dark: #252733;\n  --clr-text: #575766;\n  --clr-text-light: #9199A1;\n  --clr-white: #fff;\n  --frmx_brand_color: #6a28ea;\n  --clr-orange: #ff5a46;\n  --clr-yellow: #FFE132;\n  --black_50: #ebebeb;\n  --black_100: #d6d9dc;\n  --black_150: #c8ccd0;\n  --black_200: #bbc0c4;\n  --black_300: #9fa6ad;\n  --black_350: #9199a1;\n  --black_400: #848d95;\n  --black_500: #6a737c;\n  --black_600: #535a60;\n  --black_700: #3c4146;\n  --black_750: #2f3337;\n  --black_800: #242729;\n  --black_900: #0c0d0e;\n}","/**\n * Forumax Dashboard Styles\n *\n * Modern, visually stunning dashboard design with premium aesthetics.\n *\n * @package Forumax\n * @since   2.1.0\n */\n\n// Variables\n$dashboard-primary: #6831c1;\n$dashboard-primary-dark: #541fa3;\n$dashboard-primary-light: #8652e0;\n$dashboard-secondary: #f1bd6c;\n$dashboard-success: #10b981;\n$dashboard-warning: #f59e0b;\n$dashboard-danger: #ef4444;\n$dashboard-info: #3b82f6;\n$dashboard-dark: #1e1e2f;\n$dashboard-darker: #151521;\n$dashboard-card-bg: #ffffff;\n$dashboard-border: #e5e7eb;\n$dashboard-text: #374151;\n$dashboard-text-muted: #6b7280;\n$dashboard-gradient: linear-gradient(135deg, $dashboard-primary 0%, $dashboard-primary-light 100%);\n\n// Dashboard Wrapper\n.forumax-dashboard-wrap {\n\tmax-width: 1600px;\n\tmargin: 20px 20px 20px 0;\n\tfont-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;\n\t\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\tmargin: 20px auto;\n}\n\n.forumax-dashboard {\n\tbackground: linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%);\n\tborder-radius: 16px;\n\toverflow: hidden;\n\tbox-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n}\n\n// Dashboard Header\n.forumax-dashboard-header {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tpadding: 24px 32px;\n\tbackground: $dashboard-gradient;\n\tcolor: #fff;\n\tgap: 20px;\n\tflex-wrap: wrap;\n\t\n\t.forumax-dashboard-header-left {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 20px;\n\t}\n\t\n\t.forumax-logo {\n\t\timg {\n\t\t\theight: 48px;\n\t\t\twidth: auto;\n\t\t}\n\t}\n\t\n\t.forumax-header-text {\n\t\th1 {\n\t\t\tmargin: 0;\n\t\t\tfont-size: 28px;\n\t\t\tfont-weight: 700;\n\t\t\tline-height: 1.2;\n\t\t\tcolor: #fff;\n\t\t}\n\t\t\n\t\tp {\n\t\t\tmargin: 4px 0 0;\n\t\t\tfont-size: 14px;\n\t\t\topacity: 0.9;\n\t\t}\n\t}\n\t\n\t.forumax-dashboard-header-right {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 16px;\n\t}\n\t\n\t.forumax-version {\n\t\tbackground: rgba(255, 255, 255, 0.2);\n\t\tpadding: 6px 12px;\n\t\tborder-radius: 20px;\n\t\tfont-size: 12px;\n\t\tfont-weight: 600;\n\t\tletter-spacing: 0.5px;\n\t}\n}\n\n// Buttons\n.forumax-btn {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 10px 20px;\n\tborder-radius: 8px;\n\tfont-size: 14px;\n\tfont-weight: 600;\n\ttext-decoration: none;\n\ttransition: all 0.3s ease;\n\tcursor: pointer;\n\tborder: none;\n\t\n\t.dashicons {\n\t\tfont-size: 18px;\n\t\twidth: 18px;\n\t\theight: 18px;\n\t}\n\t\n\t&.forumax-btn-secondary {\n\t\tbackground: rgba(255, 255, 255, 0.2);\n\t\tcolor: #fff;\n\t\tborder: 1px solid rgba(255, 255, 255, 0.3);\n\t\t\n\t\t&:hover {\n\t\t\tbackground: rgba(255, 255, 255, 0.3);\n\t\t\tcolor: #fff;\n\t\t}\n\t}\n\t\n\t&.forumax-btn-upgrade {\n\t\tbackground: $dashboard-secondary;\n\t\tcolor: $dashboard-dark;\n\t\twidth: 100%;\n\t\tjustify-content: center;\n\t\t\n\t\t&:hover {\n\t\t\tbackground: darken($dashboard-secondary, 10%);\n\t\t\ttransform: translateY(-2px);\n\t\t\tbox-shadow: 0 4px 12px rgba($dashboard-secondary, 0.4);\n\t\t}\n\t}\n}\n\n// Statistics Section\n.forumax-stats-section {\n\tpadding: 32px;\n\tbackground: #fff;\n\tborder-bottom: 1px solid $dashboard-border;\n}\n\n.forumax-stats-grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n\tgap: 20px;\n\t@media screen and ( max-width: 1400px ) {\n\t\tgrid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n\t}\n}\n\n.forumax-stat-card {\n\tposition: relative;\n\tbackground: $dashboard-card-bg;\n\tborder-radius: 12px;\n\tpadding: 24px;\n\tborder: 1px solid $dashboard-border;\n\ttransition: all 0.3s ease;\n\toverflow: hidden;\n\t\n\t&::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tright: 0;\n\t\theight: 4px;\n\t\tborder-radius: 12px 12px 0 0;\n\t}\n\t\n\t&:hover {\n\t\ttransform: translateY(-4px);\n\t\tbox-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.15);\n\t}\n\t\n\t.forumax-stat-icon {\n\t\twidth: 48px;\n\t\theight: 48px;\n\t\tborder-radius: 12px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tmargin-bottom: 16px;\n\t\t\n\t\t.dashicons {\n\t\t\tfont-size: 24px;\n\t\t\twidth: 24px;\n\t\t\theight: 24px;\n\t\t\tcolor: #fff;\n\t\t}\n\t}\n\t\n\t.forumax-stat-content {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 4px;\n\t}\n\t\n\t.forumax-stat-number {\n\t\tfont-size: 32px;\n\t\tfont-weight: 700;\n\t\tline-height: 1;\n\t\tcolor: $dashboard-dark;\n\t}\n\t\n\t.forumax-stat-label {\n\t\tfont-size: 14px;\n\t\tcolor: $dashboard-text-muted;\n\t\tfont-weight: 500;\n\t}\n\t\n\t.forumax-stat-link {\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tgap: 4px;\n\t\tmargin-top: 12px;\n\t\tfont-size: 13px;\n\t\tfont-weight: 600;\n\t\tcolor: $dashboard-primary;\n\t\ttext-decoration: none;\n\t\t\n\t\t.dashicons {\n\t\t\tfont-size: 16px;\n\t\t\twidth: 16px;\n\t\t\theight: 16px;\n\t\t\ttransition: transform 0.2s ease;\n\t\t}\n\t\t\n\t\t&:hover {\n\t\t\tcolor: $dashboard-primary-dark;\n\t\t\t\n\t\t\t.dashicons {\n\t\t\t\ttransform: translateX(4px);\n\t\t\t}\n\t\t}\n\t}\n\t\n\t.forumax-stat-badge {\n\t\tdisplay: inline-block;\n\t\tpadding: 4px 8px;\n\t\tborder-radius: 4px;\n\t\tfont-size: 11px;\n\t\tfont-weight: 600;\n\t\tmargin-top: 8px;\n\t\t\n\t\t&.forumax-badge-warning {\n\t\t\tbackground: rgba($dashboard-warning, 0.1);\n\t\t\tcolor: darken($dashboard-warning, 15%);\n\t\t}\n\t\t\n\t\t&.forumax-badge-alert {\n\t\t\tbackground: rgba($dashboard-danger, 0.1);\n\t\t\tcolor: $dashboard-danger;\n\t\t\tanimation: pulse-alert 2s infinite;\n\t\t}\n\t}\n\t\n\t// Card Variations\n\t&.forumax-stat-forums {\n\t\t&::before { background: $dashboard-primary; }\n\t\t.forumax-stat-icon { background: $dashboard-primary; }\n\t}\n\n\t&.forumax-stat-unanswered{\n\t\t&::before { background: $dashboard-warning; }\n\t\t.forumax-stat-icon { background: $dashboard-warning;}\n\t}\n\t\n\t&.forumax-stat-topics {\n\t\t&::before { background: $dashboard-info; }\n\t\t.forumax-stat-icon { background: $dashboard-info; }\n\t}\n\t\n\t&.forumax-stat-replies {\n\t\t&::before { background: $dashboard-success; }\n\t\t.forumax-stat-icon { background: $dashboard-success; }\n\t}\n\t\n\t&.forumax-stat-users {\n\t\t&::before { background: #8b5cf6; }\n\t\t.forumax-stat-icon { background: #8b5cf6; }\n\t}\n\t\n\t&.forumax-stat-tags {\n\t\t&::before { background: $dashboard-warning; }\n\t\t.forumax-stat-icon { background: $dashboard-warning; }\n\t}\n\t\n\t&.forumax-stat-pending {\n\t\t&::before { background: $dashboard-text-muted; }\n\t\t.forumax-stat-icon { background: $dashboard-text-muted; }\n\t\t\n\t\t&.has-pending {\n\t\t\t&::before { background: $dashboard-danger; }\n\t\t\t.forumax-stat-icon { background: $dashboard-danger; }\n\t\t\tborder-color: rgba($dashboard-danger, 0.3);\n\t\t}\n\t}\n}\n\n@keyframes pulse-alert {\n\t0%, 100% { opacity: 1; }\n\t50% { opacity: 0.6; }\n}\n\n// Dashboard Content\n.forumax-dashboard-content {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr 360px;\n\tgap: 32px;\n\tpadding: 32px;\n\t\n\t@media (max-width: 1200px) {\n\t\tgrid-template-columns: 1fr;\n\t}\n}\n\n.forumax-dashboard-main {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 24px;\n}\n\n.forumax-dashboard-sidebar {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 24px;\n}\n\n// Cards\n.forumax-card {\n\tbackground: $dashboard-card-bg;\n\tborder-radius: 12px;\n\tborder: 1px solid $dashboard-border;\n\toverflow: hidden;\n\ttransition: box-shadow 0.3s ease;\n\t\n\t&:hover {\n\t\tbox-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n\t}\n\t\n\t.forumax-card-header {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\talign-items: center;\n\t\tpadding: 16px 20px;\n\t\tbackground: #f9fafb;\n\t\tborder-bottom: 1px solid $dashboard-border;\n\t\t\n\t\th2 {\n\t\t\tmargin: 0;\n\t\t\tfont-size: 16px;\n\t\t\tfont-weight: 600;\n\t\t\tcolor: $dashboard-dark;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: 8px;\n\t\t\t\n\t\t\t.dashicons {\n\t\t\t\tfont-size: 20px;\n\t\t\t\twidth: 20px;\n\t\t\t\theight: 20px;\n\t\t\t\tcolor: $dashboard-primary;\n\t\t\t}\n\t\t}\n\t\t\n\t\t&.forumax-gradient-header {\n\t\t\tbackground: $dashboard-gradient;\n\t\t\t\n\t\t\th2 {\n\t\t\t\tcolor: #fff;\n\t\t\t\t\n\t\t\t\t.dashicons {\n\t\t\t\t\tcolor: $dashboard-secondary;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\t\n\t.forumax-card-body {\n\t\tpadding: 20px;\n\t}\n\t\n\t.forumax-view-all {\n\t\tfont-size: 13px;\n\t\tcolor: $dashboard-primary;\n\t\ttext-decoration: none;\n\t\tfont-weight: 500;\n\t\t\n\t\t&:hover {\n\t\t\tcolor: $dashboard-primary-dark;\n\t\t}\n\t}\n}\n\n// Quick Actions\n.forumax-actions-grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(4, 1fr);\n\tgap: 16px;\n\t\n\t@media (max-width: 768px) {\n\t\tgrid-template-columns: repeat(2, 1fr);\n\t}\n}\n\n.forumax-action-item {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tgap: 12px;\n\tpadding: 20px;\n\tbackground: #f9fafb;\n\tborder-radius: 12px;\n\ttext-decoration: none;\n\ttransition: all 0.3s ease;\n\tborder: 1px solid transparent;\n\t\n\t.forumax-action-icon {\n\t\twidth: 52px;\n\t\theight: 52px;\n\t\tborder-radius: 12px;\n\t\tbackground: $dashboard-gradient;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\ttransition: transform 0.3s ease;\n\t\t\n\t\t.dashicons {\n\t\t\tfont-size: 24px;\n\t\t\twidth: 24px;\n\t\t\theight: 24px;\n\t\t\tcolor: #fff;\n\t\t}\n\t}\n\t\n\t.forumax-action-label {\n\t\tfont-size: 13px;\n\t\tfont-weight: 600;\n\t\tcolor: $dashboard-text;\n\t\ttext-align: center;\n\t}\n\t\n\t&:hover {\n\t\tbackground: #fff;\n\t\tborder-color: $dashboard-primary;\n\t\tbox-shadow: 0 4px 12px rgba($dashboard-primary, 0.15);\n\t\t\n\t\t.forumax-action-icon {\n\t\t\ttransform: scale(1.1);\n\t\t}\n\t}\n}\n\n// Activity List\n.forumax-activity-list {\n\tlist-style: none;\n\tmargin: 0;\n\tpadding: 0;\n}\n\n.forumax-activity-item {\n\tdisplay: flex;\n\talign-items: flex-start;\n\tgap: 16px;\n\tpadding: 16px 0;\n\tborder-bottom: 1px solid $dashboard-border;\n\t\n\t&:last-child {\n\t\tborder-bottom: none;\n\t\tpadding-bottom: 0;\n\t}\n\t\n\t&:first-child {\n\t\tpadding-top: 0;\n\t}\n\t\n\t.forumax-activity-avatar {\n\t\tflex-shrink: 0;\n\t\t\n\t\timg {\n\t\t\twidth: 40px;\n\t\t\theight: 40px;\n\t\t\tborder-radius: 50%;\n\t\t\tobject-fit: cover;\n\t\t}\n\t}\n\t\n\t.forumax-activity-content {\n\t\tflex: 1;\n\t\tmin-width: 0;\n\t}\n\t\n\t.forumax-activity-title {\n\t\tdisplay: block;\n\t\tfont-size: 14px;\n\t\tfont-weight: 600;\n\t\tcolor: $dashboard-dark;\n\t\ttext-decoration: none;\n\t\tmargin-bottom: 4px;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\t\n\t\t&:hover {\n\t\t\tcolor: $dashboard-primary;\n\t\t}\n\t\t&:focus {\n\t\t\toutline: none;\n\t\t}\n\t}\n\t\n\t.forumax-activity-excerpt {\n\t\tfont-size: 13px;\n\t\tcolor: $dashboard-text;\n\t\tline-height: 1.5;\n\t\tmargin-bottom: 6px;\n\t}\n\t\n\t.forumax-activity-meta {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\talign-items: center;\n\t\tgap: 6px;\n\t\tfont-size: 12px;\n\t\tcolor: $dashboard-text-muted;\n\t\t\n\t\ta {\n\t\t\tcolor: $dashboard-primary;\n\t\t\ttext-decoration: none;\n\t\t\t\n\t\t\t&:hover {\n\t\t\t\ttext-decoration: underline;\n\t\t\t}\n\t\t}\n\t}\n\t\n\t.forumax-activity-separator {\n\t\topacity: 0.5;\n\t}\n\t\n\t.forumax-activity-stats {\n\t\tflex-shrink: 0;\n\t}\n\t\n\t.forumax-reply-count {\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tgap: 4px;\n\t\tpadding: 4px 8px;\n\t\tbackground: #f3f4f6;\n\t\tborder-radius: 4px;\n\t\tfont-size: 12px;\n\t\tcolor: $dashboard-text-muted;\n\t\t\n\t\t.dashicons {\n\t\t\tfont-size: 14px;\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t}\n\t}\n}\n\n// Empty State\n.forumax-empty-state {\n\ttext-align: center;\n\tpadding: 32px 20px;\n\tcolor: $dashboard-text-muted;\n\t\n\t.dashicons {\n\t\tfont-size: 48px;\n\t\twidth: 48px;\n\t\theight: 48px;\n\t\tmargin-bottom: 12px;\n\t\topacity: 0.3;\n\t}\n\t\n\tp {\n\t\tmargin: 0;\n\t\tfont-size: 14px;\n\t}\n}\n\n// Engagement Stats\n.forumax-engagement-item {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tpadding: 12px 0;\n\tborder-bottom: 1px solid $dashboard-border;\n\t\n\t&:last-child {\n\t\tborder-bottom: none;\n\t\tpadding-bottom: 0;\n\t}\n\t\n\t&:first-child {\n\t\tpadding-top: 0;\n\t}\n\t\n\t.forumax-engagement-label {\n\t\tfont-size: 13px;\n\t\tcolor: $dashboard-text-muted;\n\t}\n\t\n\t.forumax-engagement-value {\n\t\tfont-size: 18px;\n\t\tfont-weight: 700;\n\t\tcolor: $dashboard-dark;\n\t}\n}\n\n// Pro Features\n.forumax-pro-features {\n\tlist-style: none;\n\tmargin: 0 0 20px;\n\tpadding: 0;\n\t\n\tli {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 8px;\n\t\tpadding: 8px 0;\n\t\tfont-size: 13px;\n\t\tcolor: $dashboard-text;\n\t\t\n\t\t.dashicons {\n\t\t\tfont-size: 16px;\n\t\t\twidth: 16px;\n\t\t\theight: 16px;\n\t\t\tcolor: $dashboard-success;\n\t\t}\n\t}\n}\n\n// System Info\n.forumax-info-item {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tpadding: 10px 0;\n\tborder-bottom: 1px solid $dashboard-border;\n\t\n\t&:last-child {\n\t\tborder-bottom: none;\n\t\tpadding-bottom: 0;\n\t}\n\t\n\t&:first-child {\n\t\tpadding-top: 0;\n\t}\n\t\n\t.forumax-info-label {\n\t\tfont-size: 13px;\n\t\tcolor: $dashboard-text-muted;\n\t}\n\t\n\t.forumax-info-value {\n\t\tfont-size: 13px;\n\t\tfont-weight: 600;\n\t\tcolor: $dashboard-dark;\n\t\t\n\t\t&.forumax-plan-badge {\n\t\t\tpadding: 4px 10px;\n\t\t\tborder-radius: 12px;\n\t\t\tfont-size: 11px;\n\t\t\ttext-transform: uppercase;\n\t\t\tletter-spacing: 0.5px;\n\t\t\t\n\t\t\t&.free {\n\t\t\t\tbackground: #f3f4f6;\n\t\t\t\tcolor: $dashboard-text-muted;\n\t\t\t}\n\t\t\t\n\t\t\t&.pro {\n\t\t\t\tbackground: linear-gradient(135deg, $dashboard-secondary, darken($dashboard-secondary, 10%));\n\t\t\t\tcolor: $dashboard-dark;\n\t\t\t}\n\t\t}\n\t}\n}\n\n// Helpful Links\n.forumax-links-list {\n\tlist-style: none;\n\tmargin: 0;\n\tpadding: 0;\n\t\n\tli {\n\t\tmargin-bottom: 8px;\n\t\t\n\t\t&:last-child {\n\t\t\tmargin-bottom: 0;\n\t\t}\n\t\t\n\t\ta {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: 10px;\n\t\t\tpadding: 10px 12px;\n\t\t\tbackground: #f9fafb;\n\t\t\tborder-radius: 8px;\n\t\t\ttext-decoration: none;\n\t\t\tcolor: $dashboard-text;\n\t\t\tfont-size: 13px;\n\t\t\tfont-weight: 500;\n\t\t\ttransition: all 0.2s ease;\n\t\t\t\n\t\t\t.dashicons {\n\t\t\t\tfont-size: 18px;\n\t\t\t\twidth: 18px;\n\t\t\t\theight: 18px;\n\t\t\t\tcolor: $dashboard-primary;\n\t\t\t}\n\t\t\t\n\t\t\t&:hover {\n\t\t\t\tbackground: $dashboard-primary;\n\t\t\t\tcolor: #fff;\n\t\t\t\t\n\t\t\t\t.dashicons {\n\t\t\t\t\tcolor: #fff;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n\n// Error State\n.forumax-dashboard-error {\n\tbackground: #fff;\n\tborder: 1px solid $dashboard-border;\n\tborder-radius: 12px;\n\tpadding: 40px;\n\ttext-align: center;\n\tmargin-top: 20px;\n\t\n\th2 {\n\t\tmargin: 0 0 12px;\n\t\tcolor: $dashboard-danger;\n\t}\n\t\n\tp {\n\t\tmargin: 0;\n\t\tcolor: $dashboard-text-muted;\n\t}\n}\n","/**\n * Analytics Locked Page\n *\n * Forumax analytics presentation for free users.\n *\n * @package Forumax\n * @since   2.3.0\n */\n\n/* ─── Variables ──────────────────────────────────── */\n$frmx-purple-900: #581c87;\n$frmx-purple-700: #7c3aed;\n$frmx-purple-600: #8b5cf6;\n$frmx-purple-500: #a78bfa;\n$frmx-purple-200: #ddd6fe;\n$frmx-purple-100: #ede9fe;\n$frmx-purple-50:  #f5f3ff;\n$frmx-purple-25:  #faf5ff;\n\n$frmx-indigo:  #6366f1;\n$frmx-teal:    #14b8a6;\n$frmx-amber:   #f59e0b;\n$frmx-green:   #10b981;\n$frmx-blue:    #3b82f6;\n\n$frmx-slate-900: #0f172a;\n$frmx-slate-800: #1e293b;\n$frmx-slate-700: #334155;\n$frmx-slate-500: #64748b;\n$frmx-slate-400: #94a3b8;\n$frmx-slate-300: #cbd5e1;\n$frmx-slate-200: #e2e8f0;\n$frmx-slate-100: #f1f5f9;\n$frmx-slate-50:  #f8fafc;\n\n/* ─── Reset & base ──────────────────────────────── */\n.frmx-analytics-page {\n\tmargin: 20px 20px 20px 0;\n\tfont-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,\n\t\tOxygen, Ubuntu, sans-serif;\n\t-webkit-font-smoothing: antialiased;\n\t-moz-osx-font-smoothing: grayscale;\n\n\t*,\n\t*::before,\n\t*::after {\n\t\tbox-sizing: border-box;\n\t}\n}\n\n/* ─── Shell ───────────────────────────────────────── */\n.frmx-analytics-shell {\n\twidth: 100%;\n\tbackground: $frmx-slate-50;\n\tborder: 1px solid $frmx-slate-200;\n\tborder-radius: 20px;\n\toverflow: hidden;\n\tbox-shadow:\n\t\t0 1px 3px rgba($frmx-slate-900, 0.04),\n\t\t0 12px 40px rgba($frmx-slate-900, 0.06);\n}\n\n/* ─── Shared badge / kicker ──────────────────────── */\n.frmx-analytics-kicker {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 6px;\n\tpadding: 6px 14px;\n\tborder-radius: 999px;\n\tbackground: rgba(#fff, 0.14);\n\tcolor: #fff;\n\tfont-size: 11px;\n\tfont-weight: 800;\n\tletter-spacing: 0.1em;\n\ttext-transform: uppercase;\n\n\t&--dark {\n\t\tbackground: rgba($frmx-purple-700, 0.1);\n\t\tcolor: $frmx-purple-700;\n\t}\n}\n\n/* ─── Buttons ────────────────────────────────────── */\n.frmx-analytics-btn {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 8px;\n\tpadding: 12px 22px;\n\tborder-radius: 12px;\n\tborder: 1px solid transparent;\n\tfont-size: 13px;\n\tfont-weight: 700;\n\tline-height: 1;\n\ttext-decoration: none;\n\twhite-space: nowrap;\n\tcursor: pointer;\n\ttransition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n\n\tsvg {\n\t\tflex-shrink: 0;\n\t}\n\n\t&--accent {\n\t\tbackground: linear-gradient(135deg, #f7b14f 0%, $frmx-amber 100%);\n\t\tborder-color: rgba($frmx-amber, 0.3);\n\t\tcolor: #1c1917;\n\t\tbox-shadow:\n\t\t\t0 1px 2px rgba($frmx-amber, 0.3),\n\t\t\t0 4px 12px rgba($frmx-amber, 0.15);\n\n\t\t&:hover {\n\t\t\tbackground: linear-gradient(135deg, #f5a83d 0%, darken($frmx-amber, 8%) 100%);\n\t\t\tcolor: #1c1917;\n\t\t\tbox-shadow:\n\t\t\t\t0 1px 2px rgba($frmx-amber, 0.4),\n\t\t\t\t0 8px 20px rgba($frmx-amber, 0.25);\n\t\t\ttransform: translateY(-1px);\n\t\t}\n\t}\n\n\t&--secondary {\n\t\tbackground: #fff;\n\t\tborder-color: $frmx-slate-200;\n\t\tcolor: $frmx-slate-800;\n\t\tbox-shadow: 0 1px 3px rgba($frmx-slate-900, 0.06);\n\n\t\t&:hover {\n\t\t\tborder-color: $frmx-slate-300;\n\t\t\tbackground: $frmx-slate-50;\n\t\t\tcolor: $frmx-slate-900;\n\t\t\tbox-shadow: 0 2px 8px rgba($frmx-slate-900, 0.08);\n\t\t\ttransform: translateY(-1px);\n\t\t}\n\t}\n\n\t&--primary {\n\t\tbackground: linear-gradient(135deg, $frmx-purple-700 0%, darken($frmx-purple-700, 6%) 100%);\n\t\tcolor: #fff;\n\t\tborder-color: rgba($frmx-purple-700, 0.3);\n\t\tbox-shadow:\n\t\t\t0 1px 2px rgba($frmx-purple-700, 0.3),\n\t\t\t0 4px 12px rgba($frmx-purple-700, 0.2);\n\n\t\t&:hover {\n\t\t\tbackground: linear-gradient(135deg, darken($frmx-purple-700, 6%) 0%, darken($frmx-purple-700, 12%) 100%);\n\t\t\tcolor: #fff;\n\t\t\tbox-shadow:\n\t\t\t\t0 1px 2px rgba($frmx-purple-700, 0.4),\n\t\t\t\t0 8px 20px rgba($frmx-purple-700, 0.3);\n\t\t\ttransform: translateY(-1px);\n\t\t}\n\t}\n}\n\n/* ─── Top bar ────────────────────────────────────── */\n.frmx-analytics-topbar {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tgap: 24px;\n\tpadding: 24px 36px 28px;\n\tbackground: linear-gradient(135deg, $frmx-purple-900 0%, $frmx-purple-700 50%, $frmx-purple-600 100%);\n\tposition: relative;\n\toverflow: hidden;\n\n\t&::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\ttop: -60%;\n\t\tright: -10%;\n\t\twidth: 400px;\n\t\theight: 400px;\n\t\tborder-radius: 50%;\n\t\tbackground: radial-gradient(circle, rgba(#fff, 0.08) 0%, transparent 70%);\n\t\tpointer-events: none;\n\t}\n\n\t&::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tbottom: -40%;\n\t\tleft: 15%;\n\t\twidth: 300px;\n\t\theight: 300px;\n\t\tborder-radius: 50%;\n\t\tbackground: radial-gradient(circle, rgba(#fff, 0.05) 0%, transparent 70%);\n\t\tpointer-events: none;\n\t}\n\n\t&__main {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 18px;\n\t\tmin-width: 0;\n\t\tposition: relative;\n\t\tz-index: 1;\n\t}\n\n\t&__logo {\n\t\twidth: 56px;\n\t\theight: 56px;\n\t\tborder-radius: 16px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tbackground: rgba(#fff, 0.12);\n\t\tborder: 1px solid rgba(#fff, 0.18);\n\t\tbox-shadow:\n\t\t\tinset 0 1px 0 rgba(#fff, 0.1),\n\t\t\t0 4px 12px rgba(#000, 0.1);\n\t\tbackdrop-filter: blur(8px);\n\n\t\timg {\n\t\t\theight: 26px;\n\t\t\twidth: auto;\n\t\t\tdisplay: block;\n\t\t}\n\t}\n\n\t&__copy {\n\t\th1 {\n\t\t\tdisplay: flex;\n\t\t\tflex-wrap: wrap;\n\t\t\talign-items: center;\n\t\t\tgap: 10px;\n\t\t\tmargin: 8px 0 6px;\n\t\t\tfont-size: 28px;\n\t\t\tline-height: 1.1;\n\t\t\tletter-spacing: -0.03em;\n\t\t\tcolor: #fff;\n\t\t}\n\n\t\tp {\n\t\t\tmargin: 0;\n\t\t\tmax-width: 42ch;\n\t\t\tfont-size: 13.5px;\n\t\t\tline-height: 1.65;\n\t\t\tcolor: rgba(#fff, 0.82);\n\t\t}\n\t}\n\n\t&__actions {\n\t\tposition: relative;\n\t\tz-index: 1;\n\t}\n}\n\n.frmx-analytics-plan {\n\tdisplay: inline-flex;\n\tpadding: 5px 10px;\n\tborder-radius: 999px;\n\tbackground: rgba(#fff, 0.16);\n\tcolor: #fff;\n\tfont-size: 10px;\n\tfont-weight: 800;\n\tletter-spacing: 0.08em;\n\ttext-transform: uppercase;\n\tbackdrop-filter: blur(4px);\n}\n\n/* ─── Hero section ──────────────────────────────── */\n.frmx-analytics-hero {\n\tdisplay: grid;\n\tgrid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);\n\tgap: 40px;\n\tpadding: 40px 36px;\n\tbackground: linear-gradient(180deg, $frmx-slate-100 0%, #fff 100%);\n\tborder-bottom: 1px solid $frmx-slate-200;\n\n\t&__eyebrow {\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tgap: 6px;\n\t\tpadding: 6px 12px;\n\t\tborder-radius: 999px;\n\t\tbackground: linear-gradient(135deg, rgba($frmx-purple-700, 0.08) 0%, rgba($frmx-purple-600, 0.12) 100%);\n\t\tcolor: $frmx-purple-700;\n\t\tfont-size: 11px;\n\t\tfont-weight: 800;\n\t\tletter-spacing: 0.08em;\n\t\ttext-transform: uppercase;\n\n\t\tsvg {\n\t\t\tflex-shrink: 0;\n\t\t}\n\t}\n\n\t&__copy {\n\t\th2 {\n\t\t\tmargin: 18px 0 14px;\n\t\t\tmax-width: 16ch;\n\t\t\tfont-size: 38px;\n\t\t\tline-height: 1.08;\n\t\t\tletter-spacing: -0.04em;\n\t\t\tcolor: $frmx-slate-900;\n\t\t}\n\n\t\tp {\n\t\t\tmax-width: 48ch;\n\t\t\tmargin: 0;\n\t\t\tfont-size: 15px;\n\t\t\tline-height: 1.75;\n\t\t\tcolor: $frmx-slate-500;\n\t\t}\n\t}\n\n\t&__actions {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\tgap: 12px;\n\t\tmargin-top: 24px;\n\t}\n}\n\n/* ─── Summary items ─────────────────────────────── */\n.frmx-analytics-summary {\n\tdisplay: grid;\n\tgap: 10px;\n\tmargin-top: 28px;\n\n\t&__item {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: 42px minmax(0, 1fr);\n\t\tgap: 14px;\n\t\tpadding: 14px 16px;\n\t\tbackground: #fff;\n\t\tborder: 1px solid $frmx-slate-200;\n\t\tborder-radius: 14px;\n\t\tbox-shadow: 0 1px 4px rgba($frmx-slate-900, 0.03);\n\t\ttransition: all 0.2s ease;\n\n\t\t&:hover {\n\t\t\tborder-color: #c7d2fe;\n\t\t\tbox-shadow: 0 4px 16px rgba($frmx-purple-700, 0.06);\n\t\t}\n\n\t\tstrong {\n\t\t\tdisplay: block;\n\t\t\tmargin-bottom: 2px;\n\t\t\tfont-size: 14px;\n\t\t\tcolor: $frmx-slate-900;\n\t\t}\n\n\t\tp {\n\t\t\tmargin: 0;\n\t\t\tfont-size: 12.5px;\n\t\t\tline-height: 1.55;\n\t\t\tcolor: $frmx-slate-500;\n\t\t}\n\t}\n\n\t&__icon {\n\t\twidth: 42px;\n\t\theight: 42px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tborder-radius: 12px;\n\n\t\t&--blue {\n\t\t\tbackground: linear-gradient(135deg, rgba($frmx-blue, 0.1) 0%, rgba($frmx-blue, 0.16) 100%);\n\t\t\tcolor: $frmx-blue;\n\t\t}\n\n\t\t&--purple {\n\t\t\tbackground: linear-gradient(135deg, rgba($frmx-purple-700, 0.1) 0%, rgba($frmx-purple-700, 0.16) 100%);\n\t\t\tcolor: $frmx-purple-700;\n\t\t}\n\n\t\t&--green {\n\t\t\tbackground: linear-gradient(135deg, rgba($frmx-green, 0.1) 0%, rgba($frmx-green, 0.16) 100%);\n\t\t\tcolor: $frmx-green;\n\t\t}\n\t}\n}\n\n/* ─── Preview widget ────────────────────────────── */\n.frmx-analytics-preview {\n\t&__window {\n\t\tpadding: 16px;\n\t\tbackground: #fff;\n\t\tborder: 1px solid $frmx-slate-200;\n\t\tborder-radius: 24px;\n\t\tbox-shadow:\n\t\t\t0 1px 3px rgba($frmx-slate-900, 0.04),\n\t\t\t0 12px 36px rgba($frmx-slate-900, 0.07);\n\t}\n\n\t&__top {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\tgap: 10px;\n\t\tmargin-bottom: 16px;\n\t\tpadding: 4px 4px 0;\n\t}\n\n\t&__dots {\n\t\tdisplay: flex;\n\t\tgap: 6px;\n\n\t\tspan {\n\t\t\twidth: 8px;\n\t\t\theight: 8px;\n\t\t\tborder-radius: 50%;\n\t\t\tbackground: $frmx-slate-200;\n\n\t\t\t&:first-child {\n\t\t\t\tbackground: $frmx-purple-500;\n\t\t\t}\n\n\t\t\t&:nth-child(2) {\n\t\t\t\tbackground: $frmx-purple-200;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__label {\n\t\tfont-size: 12px;\n\t\tfont-weight: 700;\n\t\tcolor: $frmx-purple-700;\n\t\tletter-spacing: 0.02em;\n\t}\n\n\t/* Preview stats */\n\t&__stats {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(3, 1fr);\n\t\tgap: 12px;\n\t}\n\n\t&__stat {\n\t\tpadding: 16px 14px 14px;\n\t\tbackground: #fafbff;\n\t\tborder: 1px solid #eef2ff;\n\t\tborder-radius: 16px;\n\t\ttransition: all 0.2s ease;\n\n\t\t&:hover {\n\t\t\tborder-color: #c7d2fe;\n\t\t\tbackground: $frmx-purple-50;\n\t\t}\n\n\t\tlabel {\n\t\t\tdisplay: block;\n\t\t\tmargin-bottom: 4px;\n\t\t\tfont-size: 11px;\n\t\t\tfont-weight: 700;\n\t\t\tcolor: $frmx-slate-400;\n\t\t\ttext-transform: uppercase;\n\t\t\tletter-spacing: 0.04em;\n\t\t}\n\n\t\tstrong {\n\t\t\tdisplay: block;\n\t\t\tfont-size: 26px;\n\t\t\tline-height: 1;\n\t\t\tletter-spacing: -0.03em;\n\t\t\tcolor: $frmx-slate-900;\n\t\t}\n\t}\n\n\t/* Sparklines */\n\t&__sparkline {\n\t\tmargin-top: 8px;\n\t\theight: 24px;\n\t\topacity: 0.6;\n\n\t\tsvg {\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t}\n\t}\n\n\t/* Preview chart */\n\t&__chart {\n\t\tposition: relative;\n\t\tmargin-top: 14px;\n\t\tborder-radius: 18px;\n\t\toverflow: hidden;\n\t\tbackground: linear-gradient(180deg, $frmx-purple-50 0%, $frmx-purple-100 100%);\n\t}\n\n\t&__chart-bars {\n\t\tdisplay: flex;\n\t\talign-items: flex-end;\n\t\tgap: 10px;\n\t\theight: 220px;\n\t\tpadding: 20px 18px 24px;\n\t}\n\n\t/* Lock overlay */\n\t&__lock {\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tgap: 10px;\n\t\tbackground: rgba(#fff, 0.5);\n\t\tbackdrop-filter: blur(4px);\n\t\t-webkit-backdrop-filter: blur(4px);\n\n\t\tspan {\n\t\t\tfont-size: 13px;\n\t\t\tfont-weight: 800;\n\t\t\tcolor: #1e1b4b;\n\t\t\tletter-spacing: 0.02em;\n\t\t}\n\t}\n\n\t&__lock-icon {\n\t\twidth: 44px;\n\t\theight: 44px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tborder-radius: 50%;\n\t\tbackground: rgba($frmx-purple-700, 0.08);\n\t\tcolor: $frmx-purple-700;\n\t}\n}\n\n/* ─── Badges ──────────────────────────────────── */\n.frmx-analytics-badge {\n\tdisplay: inline-flex;\n\tmargin-top: 8px;\n\tpadding: 4px 10px;\n\tborder-radius: 999px;\n\tfont-size: 11px;\n\tfont-weight: 700;\n\n\t&--green {\n\t\tbackground: rgba($frmx-green, 0.1);\n\t\tcolor: darken($frmx-green, 8%);\n\t}\n\n\t&--purple {\n\t\tbackground: rgba($frmx-purple-600, 0.1);\n\t\tcolor: $frmx-purple-700;\n\t}\n\n\t&--amber {\n\t\tbackground: rgba($frmx-amber, 0.1);\n\t\tcolor: darken($frmx-amber, 8%);\n\t}\n}\n\n/* ─── Chart bars with animation ─────────────────── */\n.frmx-bar {\n\tflex: 1;\n\tmin-width: 0;\n\tborder-radius: 8px 8px 4px 4px;\n\tbackground: linear-gradient(\n\t\t180deg,\n\t\trgba($frmx-purple-600, 0.4) 0%,\n\t\trgba($frmx-purple-700, 0.65) 100%\n\t);\n\tanimation: frmx-bar-grow 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;\n\n\t&-1 { height: 22%; animation-delay: 0s; }\n\t&-2 { height: 38%; animation-delay: 0.06s; }\n\t&-3 { height: 28%; animation-delay: 0.12s; }\n\t&-4 { height: 55%; animation-delay: 0.18s; }\n\t&-5 { height: 40%; animation-delay: 0.24s; }\n\t&-6 { height: 65%; animation-delay: 0.3s; }\n\t&-7 { height: 48%; animation-delay: 0.36s; }\n}\n\n@keyframes frmx-bar-grow {\n\tfrom {\n\t\theight: 0;\n\t\topacity: 0;\n\t}\n\tto {\n\t\topacity: 1;\n\t}\n}\n\n/* ─── Section ────────────────────────────────────── */\n.frmx-analytics-section {\n\tpadding: 44px 36px;\n\tborder-bottom: 1px solid $frmx-slate-200;\n\n\t&--soft {\n\t\tbackground: linear-gradient(180deg, $frmx-purple-25 0%, $frmx-slate-50 100%);\n\t}\n\n\t&__header {\n\t\tmax-width: 640px;\n\t\tmargin: 0 auto;\n\t\ttext-align: center;\n\n\t\th2 {\n\t\t\tmargin: 16px 0 10px;\n\t\t\tfont-size: 30px;\n\t\t\tline-height: 1.15;\n\t\t\tletter-spacing: -0.035em;\n\t\t\tcolor: $frmx-slate-900;\n\t\t}\n\n\t\tp {\n\t\t\tmargin: 0;\n\t\t\tfont-size: 14.5px;\n\t\t\tline-height: 1.75;\n\t\t\tcolor: $frmx-slate-500;\n\t\t}\n\t}\n}\n\n/* Section icons */\n.frmx-analytics-icon {\n\twidth: 48px;\n\theight: 48px;\n\tmargin: 0 auto;\n\tborder-radius: 14px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground: linear-gradient(135deg, rgba($frmx-purple-700, 0.08) 0%, rgba($frmx-purple-700, 0.14) 100%);\n\tcolor: $frmx-purple-700;\n\n\t&--blue {\n\t\tbackground: linear-gradient(135deg, rgba($frmx-blue, 0.08) 0%, rgba($frmx-blue, 0.14) 100%);\n\t\tcolor: $frmx-blue;\n\t}\n}\n\n/* ─── Stats grid (What you can measure) ──────── */\n.frmx-analytics-stats {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(4, 1fr);\n\tgap: 16px;\n\tmargin-top: 30px;\n}\n\n.frmx-analytics-stat {\n\tpadding: 22px 20px;\n\tbackground: #fff;\n\tborder: 1px solid $frmx-slate-200;\n\tborder-radius: 16px;\n\ttransition: all 0.25s ease;\n\tposition: relative;\n\toverflow: hidden;\n\n\t&::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tright: 0;\n\t\theight: 3px;\n\t\tbackground: transparent;\n\t\tborder-radius: 16px 16px 0 0;\n\t\ttransition: background 0.25s ease;\n\t}\n\n\t&:hover {\n\t\tborder-color: #c7d2fe;\n\t\tbox-shadow:\n\t\t\t0 4px 16px rgba($frmx-purple-700, 0.06),\n\t\t\t0 1px 3px rgba($frmx-slate-900, 0.04);\n\t\ttransform: translateY(-2px);\n\t}\n\n\t&:nth-child(1):hover::before { background: linear-gradient(90deg, $frmx-indigo, lighten($frmx-indigo, 12%)); }\n\t&:nth-child(2):hover::before { background: linear-gradient(90deg, $frmx-purple-600, $frmx-purple-500); }\n\t&:nth-child(3):hover::before { background: linear-gradient(90deg, $frmx-teal, lighten($frmx-teal, 12%)); }\n\t&:nth-child(4):hover::before { background: linear-gradient(90deg, $frmx-amber, lighten($frmx-amber, 12%)); }\n\n\t/* Stat icons */\n\t&__icon {\n\t\twidth: 44px;\n\t\theight: 44px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tborder-radius: 12px;\n\t\tmargin-bottom: 16px;\n\n\t\t&--indigo {\n\t\t\tbackground: linear-gradient(135deg, rgba($frmx-indigo, 0.1) 0%, rgba($frmx-indigo, 0.18) 100%);\n\t\t\tcolor: $frmx-indigo;\n\t\t}\n\n\t\t&--violet {\n\t\t\tbackground: linear-gradient(135deg, rgba($frmx-purple-600, 0.1) 0%, rgba($frmx-purple-600, 0.18) 100%);\n\t\t\tcolor: $frmx-purple-600;\n\t\t}\n\n\t\t&--teal {\n\t\t\tbackground: linear-gradient(135deg, rgba($frmx-teal, 0.1) 0%, rgba($frmx-teal, 0.18) 100%);\n\t\t\tcolor: $frmx-teal;\n\t\t}\n\n\t\t&--amber {\n\t\t\tbackground: linear-gradient(135deg, rgba($frmx-amber, 0.1) 0%, rgba($frmx-amber, 0.18) 100%);\n\t\t\tcolor: $frmx-amber;\n\t\t}\n\t}\n\n\tstrong {\n\t\tdisplay: block;\n\t\tmargin-bottom: 8px;\n\t\tfont-size: 18px;\n\t\tletter-spacing: -0.02em;\n\t\tcolor: $frmx-slate-900;\n\t}\n\n\tspan {\n\t\tdisplay: block;\n\t\tfont-size: 13px;\n\t\tline-height: 1.7;\n\t\tcolor: $frmx-slate-500;\n\t}\n}\n\n/* ─── Report cards grid ─────────────────────────── */\n.frmx-analytics-grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(2, 1fr);\n\tgap: 16px;\n\tmargin-top: 30px;\n}\n\n.frmx-analytics-card {\n\tpadding: 24px 22px;\n\tbackground: #fff;\n\tborder: 1px solid $frmx-slate-200;\n\tborder-radius: 16px;\n\ttransition: all 0.25s ease;\n\n\t&:hover {\n\t\tborder-color: #c7d2fe;\n\t\tbox-shadow:\n\t\t\t0 4px 16px rgba($frmx-purple-700, 0.06),\n\t\t\t0 1px 3px rgba($frmx-slate-900, 0.04);\n\t\ttransform: translateY(-2px);\n\t}\n\n\t/* Card icons */\n\t&__icon {\n\t\twidth: 40px;\n\t\theight: 40px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tborder-radius: 10px;\n\t\tmargin-bottom: 14px;\n\n\t\t&--indigo {\n\t\t\tbackground: linear-gradient(135deg, rgba($frmx-indigo, 0.08) 0%, rgba($frmx-indigo, 0.16) 100%);\n\t\t\tcolor: $frmx-indigo;\n\t\t}\n\n\t\t&--violet {\n\t\t\tbackground: linear-gradient(135deg, rgba($frmx-purple-600, 0.08) 0%, rgba($frmx-purple-600, 0.16) 100%);\n\t\t\tcolor: $frmx-purple-600;\n\t\t}\n\n\t\t&--teal {\n\t\t\tbackground: linear-gradient(135deg, rgba($frmx-teal, 0.08) 0%, rgba($frmx-teal, 0.16) 100%);\n\t\t\tcolor: $frmx-teal;\n\t\t}\n\n\t\t&--amber {\n\t\t\tbackground: linear-gradient(135deg, rgba($frmx-amber, 0.08) 0%, rgba($frmx-amber, 0.16) 100%);\n\t\t\tcolor: $frmx-amber;\n\t\t}\n\t}\n\n\th3 {\n\t\tmargin: 0 0 8px;\n\t\tfont-size: 17px;\n\t\tline-height: 1.3;\n\t\tletter-spacing: -0.01em;\n\t\tcolor: $frmx-slate-900;\n\t}\n\n\tp {\n\t\tmargin: 0;\n\t\tfont-size: 13.5px;\n\t\tline-height: 1.75;\n\t\tcolor: $frmx-slate-500;\n\t}\n}\n\n/* ─── Footer CTA ─────────────────────────────────── */\n.frmx-analytics-footer {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tgap: 32px;\n\tpadding: 36px;\n\tbackground: linear-gradient(135deg, $frmx-purple-25 0%, #f0f9ff 50%, #fff 100%);\n\tposition: relative;\n\toverflow: hidden;\n\n\t&__glow {\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tleft: 50%;\n\t\ttransform: translate(-50%, -50%);\n\t\twidth: 500px;\n\t\theight: 200px;\n\t\tbackground: radial-gradient(ellipse, rgba($frmx-purple-700, 0.06) 0%, transparent 70%);\n\t\tpointer-events: none;\n\t}\n\n\t&__content {\n\t\tmax-width: 560px;\n\t\tposition: relative;\n\t\tz-index: 1;\n\n\t\th2 {\n\t\t\tmargin: 14px 0 8px;\n\t\t\tfont-size: 28px;\n\t\t\tline-height: 1.15;\n\t\t\tletter-spacing: -0.035em;\n\t\t\tcolor: $frmx-slate-900;\n\t\t}\n\n\t\tp {\n\t\t\tmargin: 0;\n\t\t\tfont-size: 14px;\n\t\t\tline-height: 1.75;\n\t\t\tcolor: $frmx-slate-500;\n\t\t}\n\t}\n\n\t> .frmx-analytics-btn {\n\t\tposition: relative;\n\t\tz-index: 1;\n\t\tflex-shrink: 0;\n\t}\n}\n\n/* ─── Responsive ─────────────────────────────────── */\n@media (max-width: 1080px) {\n\t.frmx-analytics-hero {\n\t\tgrid-template-columns: 1fr;\n\t\tgap: 32px;\n\n\t\t&__copy h2 {\n\t\t\tmax-width: none;\n\t\t}\n\t}\n}\n\n@media (max-width: 980px) {\n\t.frmx-analytics-topbar,\n\t.frmx-analytics-footer {\n\t\tflex-direction: column;\n\t\talign-items: flex-start;\n\t}\n\n\t.frmx-analytics-stats {\n\t\tgrid-template-columns: 1fr 1fr;\n\t}\n}\n\n@media (max-width: 782px) {\n\t.frmx-analytics-page {\n\t\tmargin-right: 10px;\n\t}\n\n\t.frmx-analytics-topbar,\n\t.frmx-analytics-hero,\n\t.frmx-analytics-section,\n\t.frmx-analytics-footer {\n\t\tpadding-left: 20px;\n\t\tpadding-right: 20px;\n\t}\n\n\t.frmx-analytics-topbar__copy h1,\n\t.frmx-analytics-hero__copy h2,\n\t.frmx-analytics-section__header h2,\n\t.frmx-analytics-footer__content h2 {\n\t\tfont-size: 24px;\n\t\tmax-width: none;\n\t}\n\n\t.frmx-analytics-topbar__main {\n\t\talign-items: flex-start;\n\t}\n\n\t.frmx-analytics-topbar__logo {\n\t\twidth: 48px;\n\t\theight: 48px;\n\t}\n\n\t.frmx-analytics-preview__stats,\n\t.frmx-analytics-stats,\n\t.frmx-analytics-grid {\n\t\tgrid-template-columns: 1fr;\n\t}\n}\n","/**\n * Forumax Setup Wizard Styles\n *\n * Redesigned to follow the Jobus onboarding wizard aesthetic:\n * clean top bar, numbered steps, large card, left-aligned content.\n *\n * @package Forumax\n * @since   2.2.0\n */\n\n// ─── Font Import ──────────────────────────────────────────────────────────────\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');\n\n// Variables\n$setup-primary:       #6831c1;\n$setup-primary-dark:  #541fa3;\n$setup-primary-light: #8652e0;\n$setup-primary-bg:    rgba(104, 49, 193, 0.08);\n$setup-secondary:     #f1bd6c;\n$setup-success:       #10b981;\n$setup-info:          #3b82f6;\n$setup-bg:            #ffffff;\n$setup-page-bg:       #f8fafc;\n$setup-border:        #e2e8f0;\n$setup-border-light:  #f1f5f9;\n$setup-text:          #0f172a;\n$setup-text-secondary:#334155;\n$setup-text-muted:    #64748b;\n$setup-card-shadow:   0 20px 40px -4px rgba(0, 0, 0, 0.08), 0 8px 16px -4px rgba(0, 0, 0, 0.04);\n\n\n// ─── WordPress Admin UI Overrides ─────────────────────────────────────────────\nbody.forumax-setup-page {\n\t&.admin-bar {\n\t\tpadding-top: 0 !important;\n\t}\n\n\t#wpadminbar {\n\t\tdisplay: none !important;\n\t}\n\n\t#adminmenu,\n\t#adminmenuback,\n\t#adminmenuwrap,\n\t#adminmenushadow {\n\t\tdisplay: none !important;\n\t}\n\n\t.update-nag,\n\t.notice,\n\t.error,\n\t.success,\n\t.warning,\n\t#wpfooter,\n\t.wp-header-end {\n\t\tdisplay: none !important;\n\t}\n\n\t#wpwrap {\n\t\tbackground: $setup-page-bg;\n\t}\n\n\t#wpcontent,\n\t#wpbody {\n\t\tmargin-left: 0 !important;\n\t\tpadding: 0 !important;\n\t\tfloat: none;\n\t}\n\n\thtml,\n\t#wpwrap,\n\t#wpcontent {\n\t\theight: 100%;\n\t\tmin-height: 100vh;\n\t\toverflow-y: auto;\n\t}\n}\n\n// ─── Page Layout ──────────────────────────────────────────────────────────────\n.forumax-setup-wrap {\n\tmargin: 0;\n\tpadding: 0;\n\twidth: 100%;\n\tmin-height: 100vh;\n\tbackground: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);\n\tfont-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;\n\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n}\n\n// ─── Top Bar ──────────────────────────────────────────────────────────────────\n.forumax-setup-topbar {\n\twidth: 100%;\n\tbackground: rgba(255, 255, 255, 0.85);\n\tbackdrop-filter: blur(12px);\n\tborder-bottom: 1px solid rgba(226, 232, 240, 0.8);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 0 40px;\n\theight: 64px;\n\tflex-shrink: 0;\n\n\n\t.forumax-setup-logo {\n\t\timg {\n\t\t\theight: 32px;\n\t\t\twidth: auto;\n\t\t\tdisplay: block;\n\t\t}\n\t}\n\n\t.forumax-btn-skip-top {\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tgap: 6px;\n\t\tcolor: $setup-text-muted;\n\t\tfont-size: 14px;\n\t\tfont-weight: 500;\n\t\ttext-decoration: none;\n\t\tpadding: 6px 0;\n\t\ttransition: color 0.2s ease;\n\n\t\t.dashicons {\n\t\t\tfont-size: 14px;\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t}\n\n\t\t&:hover {\n\t\t\tcolor: $setup-text;\n\t\t}\n\t}\n}\n\n// ─── Step Indicator Bar ───────────────────────────────────────────────────────\n.forumax-setup-steps-bar {\n\twidth: 100%;\n\tdisplay: flex;\n\tjustify-content: center;\n\tpadding: 28px 40px 0;\n}\n\n.forumax-progress-steps {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 0;\n}\n\n.forumax-progress-step {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 10px;\n\tposition: relative;\n\tcursor: pointer;\n\tuser-select: none;\n\n\t&:hover:not(.active) {\n\t\t.forumax-step-circle {\n\t\t\tborder-color: rgba($setup-primary, 0.4);\n\t\t\tcolor: $setup-primary;\n\t\t}\n\n\t\t.forumax-step-label {\n\t\t\tcolor: $setup-text-secondary;\n\t\t}\n\t}\n\n\t// Connecting line between steps\n\t&:not(:last-child)::after {\n\t\tcontent: '';\n\t\tdisplay: block;\n\t\twidth: 72px;\n\t\theight: 2px;\n\t\tbackground: $setup-border;\n\t\tmargin: 0 8px;\n\t\ttransition: background 0.3s ease;\n\t\tflex-shrink: 0;\n\t}\n\n\t&.completed:not(:last-child)::after {\n\t\tbackground: $setup-success;\n\t}\n\n\t.forumax-step-circle {\n\t\twidth: 34px;\n\t\theight: 34px;\n\t\tborder-radius: 50%;\n\t\tbackground: #fff;\n\t\tborder: 2px solid $setup-border;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tfont-size: 13px;\n\t\tfont-weight: 700;\n\t\tcolor: $setup-text-muted;\n\t\ttransition: all 0.3s ease;\n\t\tflex-shrink: 0;\n\t\tposition: relative;\n\n\t\t// Number shown by default\n\t\t.frmx-step-number {\n\t\t\tline-height: 1;\n\t\t}\n\n\t\t// Check icon hidden by default\n\t\t.frmx-step-check {\n\t\t\tdisplay: none;\n\t\t\tfont-size: 16px;\n\t\t\twidth: 16px;\n\t\t\theight: 16px;\n\t\t\tcolor: #fff;\n\t\t}\n\t}\n\n\t.forumax-step-label {\n\t\tfont-size: 14px;\n\t\tfont-weight: 500;\n\t\tcolor: $setup-text-muted;\n\t\twhite-space: nowrap;\n\t\ttransition: color 0.3s ease;\n\n\t\t@media (max-width: 768px) {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t// Active step\n\t&.active {\n\t\t.forumax-step-circle {\n\t\t\tbackground: $setup-primary;\n\t\t\tborder-color: $setup-primary;\n\t\t\tcolor: #fff;\n\t\t}\n\n\t\t.forumax-step-label {\n\t\t\tcolor: $setup-primary;\n\t\t\tfont-weight: 600;\n\t\t}\n\t}\n\n\t// Completed step\n\t&.completed {\n\t\t.forumax-step-circle {\n\t\t\tbackground: $setup-success;\n\t\t\tborder-color: $setup-success;\n\n\t\t\t.frmx-step-number {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\n\t\t\t.frmx-step-check {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t}\n\t\t}\n\n\t\t.forumax-step-label {\n\t\t\tcolor: $setup-success;\n\t\t}\n\t}\n}\n\n// ─── Wizard Card ──────────────────────────────────────────────────────────────\n.forumax-setup-card {\n\twidth: 100%;\n\tmax-width: 660px;\n\tbackground: $setup-bg;\n\tborder-radius: 20px;\n\tbox-shadow: $setup-card-shadow;\n\tborder: 1px solid rgba(255, 255, 255, 0.6);\n\tmargin: 28px 40px 40px;\n\tdisplay: flex;\n\tflex-direction: column;\n\toverflow: hidden;\n\tposition: relative;\n}\n\n\n.forumax-setup-card-body {\n\tpadding: 40px 48px 32px;\n\tflex: 1;\n\n\t@media (max-width: 640px) {\n\t\tpadding: 28px 24px 24px;\n\t}\n}\n\n// ─── Step Content ─────────────────────────────────────────────────────────────\n.forumax-setup-step {\n\tdisplay: none;\n}\n\n// Step heading\n.forumax-setup-step-title {\n\tfont-size: 24px;\n\tfont-weight: 700;\n\tcolor: $setup-text;\n\tmargin: 0 0 8px;\n\tline-height: 1.3;\n}\n\n.forumax-setup-step-desc {\n\tfont-size: 15px;\n\tcolor: $setup-text-muted;\n\tmargin: 0 0 32px;\n\tline-height: 1.6;\n}\n\n// ─── Welcome Step  ────────────────────────────────────────────────────────────\n.forumax-welcome-emoji {\n\tfont-size: 36px;\n\tline-height: 1;\n\tmargin-bottom: 16px;\n\tdisplay: block;\n}\n\n.forumax-feature-grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(3, 1fr);\n\tgap: 16px;\n\tmargin-bottom: 28px;\n\n\t@media (max-width: 560px) {\n\t\tgrid-template-columns: 1fr;\n\t}\n}\n\n.forumax-feature-item {\n\ttext-align: center;\n\tpadding: 20px 16px;\n\tbackground: $setup-border-light;\n\tborder-radius: 12px;\n\tborder: 1px solid $setup-border;\n\ttransition: all 0.25s ease;\n\n\t.forumax-feature-icon {\n\t\twidth: 48px;\n\t\theight: 48px;\n\t\tmargin: 0 auto 14px;\n\t\tbackground: $setup-primary-bg;\n\t\tborder-radius: 12px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\t.dashicons {\n\t\t\tfont-size: 22px;\n\t\t\twidth: 22px;\n\t\t\theight: 22px;\n\t\t\tcolor: $setup-primary;\n\t\t}\n\t}\n\n\th3 {\n\t\tmargin: 0 0 6px;\n\t\tfont-size: 14px;\n\t\tfont-weight: 600;\n\t\tcolor: $setup-text-secondary;\n\t}\n\n\tp {\n\t\tmargin: 0;\n\t\tfont-size: 13px;\n\t\tcolor: $setup-text-muted;\n\t\tline-height: 1.5;\n\t}\n\n\t&:hover {\n\t\tborder-color: rgba($setup-primary, 0.3);\n\t\tbackground: rgba($setup-primary, 0.03);\n\t\ttransform: translateY(-2px);\n\t\tbox-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);\n\t}\n}\n\n.forumax-info-box {\n\tdisplay: flex;\n\tgap: 12px;\n\tpadding: 14px 18px;\n\tbackground: rgba($setup-info, 0.06);\n\tborder: 1px solid rgba($setup-info, 0.18);\n\tborder-radius: 10px;\n\tcolor: darken($setup-info, 10%);\n\tfont-size: 14px;\n\tline-height: 1.6;\n\tmargin-top: 20px;\n\n\t.dashicons {\n\t\tflex-shrink: 0;\n\t\tfont-size: 18px;\n\t\twidth: 18px;\n\t\theight: 18px;\n\t\tmargin-top: 2px;\n\t}\n}\n\n// ─── Color Picker Field ───────────────────────────────────────────────────────\n.forumax-color-field {\n\t.forumax-color-input-wrap {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 12px;\n\n\t\tinput[type='color'] {\n\t\t\t-webkit-appearance: none;\n\t\t\tappearance: none;\n\t\t\tborder: 2px solid $setup-border;\n\t\t\tborder-radius: 10px;\n\t\t\twidth: 48px;\n\t\t\theight: 48px;\n\t\t\tpadding: 3px;\n\t\t\tcursor: pointer;\n\t\t\ttransition: border-color 0.2s ease, box-shadow 0.2s ease;\n\t\t\tbackground: none;\n\n\t\t\t&::-webkit-color-swatch-wrapper {\n\t\t\t\tpadding: 0;\n\t\t\t}\n\n\t\t\t&::-webkit-color-swatch {\n\t\t\t\tborder: none;\n\t\t\t\tborder-radius: 7px;\n\t\t\t}\n\n\t\t\t&::-moz-color-swatch {\n\t\t\t\tborder: none;\n\t\t\t\tborder-radius: 7px;\n\t\t\t}\n\n\t\t\t&:hover,\n\t\t\t&:focus {\n\t\t\t\tborder-color: $setup-primary;\n\t\t\t\tbox-shadow: 0 0 0 3px rgba($setup-primary, 0.1);\n\t\t\t\toutline: none;\n\t\t\t}\n\t\t}\n\t}\n\n\t.forumax-color-hex-input {\n\t\twidth: 120px;\n\t\tpadding: 11px 14px;\n\t\tborder: 1.5px solid $setup-border;\n\t\tborder-radius: 8px;\n\t\tfont-size: 14px;\n\t\tfont-family: 'SF Mono', 'Fira Code', monospace, inherit;\n\t\tcolor: $setup-text;\n\t\ttext-transform: uppercase;\n\t\tletter-spacing: 0.5px;\n\t\tbackground: #fff;\n\t\ttransition: border-color 0.2s ease, box-shadow 0.2s ease;\n\n\t\t&:focus {\n\t\t\toutline: none;\n\t\t\tborder-color: $setup-primary;\n\t\t\tbox-shadow: 0 0 0 3px rgba($setup-primary, 0.1);\n\t\t}\n\t}\n}\n\n// ─── Section Heading (inside steps) ──────────────────────────────────────────\n.forumax-section-heading {\n\tmargin: 0 0 4px;\n\tfont-size: 17px;\n\tfont-weight: 600;\n\tcolor: $setup-text;\n}\n\n.forumax-section-subheading {\n\tfont-size: 13px;\n\tcolor: $setup-text-muted;\n\tmargin: 0 0 20px;\n\tline-height: 1.5;\n}\n\n.forumax-section + .forumax-section {\n\tmargin-top: 32px;\n}\n\n// ─── Toggle Row (Jobus-style) ─────────────────────────────────────────────────\n.forumax-toggle-rows {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px;\n}\n\n.forumax-toggle-row {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 14px;\n\tpadding: 14px 16px;\n\tbackground: $setup-border-light;\n\tborder-radius: 10px;\n\tcursor: pointer;\n\ttransition: background 0.2s ease;\n\tmargin-bottom: 0 !important;\n\n\tinput[type='checkbox'] {\n\t\tdisplay: none;\n\t}\n\n\t.frmx-row-icon {\n\t\twidth: 36px;\n\t\theight: 36px;\n\t\tborder-radius: 8px;\n\t\tbackground: #fff;\n\t\tborder: 1px solid $setup-border;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tflex-shrink: 0;\n\n\t\t.dashicons {\n\t\t\tfont-size: 18px;\n\t\t\twidth: 18px;\n\t\t\theight: 18px;\n\t\t\tcolor: $setup-text-muted;\n\t\t}\n\t}\n\n\t.frmx-row-body {\n\t\tflex: 1;\n\t\tmin-width: 0;\n\n\t\t.frmx-row-title {\n\t\t\tdisplay: block;\n\t\t\tfont-size: 14px;\n\t\t\tfont-weight: 600;\n\t\t\tcolor: $setup-text-secondary;\n\t\t\tmargin-bottom: 2px;\n\t\t}\n\n\t\t.frmx-row-desc {\n\t\t\tdisplay: block;\n\t\t\tfont-size: 13px;\n\t\t\tcolor: $setup-text-muted;\n\t\t\tline-height: 1.4;\n\t\t}\n\t}\n\n\t// Toggle switch on the right\n\t.frmx-toggle-switch {\n\t\tposition: relative;\n\t\twidth: 42px;\n\t\theight: 24px;\n\t\tbackground: #d1d5db;\n\t\tborder-radius: 12px;\n\t\ttransition: background 0.2s ease;\n\t\tflex-shrink: 0;\n\n\t\t&::after {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\ttop: 3px;\n\t\t\tleft: 3px;\n\t\t\twidth: 18px;\n\t\t\theight: 18px;\n\t\t\tbackground: #fff;\n\t\t\tborder-radius: 50%;\n\t\t\ttransition: transform 0.2s ease;\n\t\t\tbox-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);\n\t\t}\n\t}\n\n\tinput[type='checkbox']:checked ~ .frmx-toggle-switch {\n\t\tbackground: $setup-primary;\n\n\t\t&::after {\n\t\t\ttransform: translateX(18px);\n\t\t}\n\t}\n\n\t&:hover {\n\t\tbackground: rgba($setup-primary, 0.04);\n\t}\n}\n\n// ─── Form Fields ──────────────────────────────────────────────────────────────\n.forumax-form-group {\n\tmargin-bottom: 20px;\n\n\tlabel:not(.forumax-toggle-row) {\n\t\tdisplay: block;\n\t\tfont-size: 14px;\n\t\tfont-weight: 600;\n\t\tcolor: $setup-text-secondary;\n\t\tmargin-bottom: 8px;\n\t}\n\n\tinput[type='text'],\n\tinput[type='number'],\n\ttextarea,\n\tselect {\n\t\twidth: 100%;\n\t\tpadding: 11px 14px;\n\t\tborder: 1.5px solid $setup-border;\n\t\tborder-radius: 8px;\n\t\tfont-size: 14px;\n\t\tcolor: $setup-text;\n\t\ttransition: border-color 0.2s ease, box-shadow 0.2s ease;\n\t\tfont-family: inherit;\n\t\tbackground: #fff;\n\n\t\t&:focus {\n\t\t\toutline: none;\n\t\t\tborder-color: $setup-primary;\n\t\t\tbox-shadow: 0 0 0 3px rgba($setup-primary, 0.1);\n\t\t}\n\n\t\t&::placeholder {\n\t\t\tcolor: #9ca3af;\n\t\t}\n\t}\n\n\ttextarea {\n\t\tresize: vertical;\n\t\tmin-height: 84px;\n\t}\n\n\t.forumax-field-description {\n\t\tmargin: 6px 0 0;\n\t\tfont-size: 13px;\n\t\tcolor: $setup-text-muted;\n\t\tline-height: 1.4;\n\t}\n}\n\n// ─── Compact Inline Field Row (label + small input side by side) ───────────\n.forumax-form-row {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 16px;\n\tmargin-top: 4px;\n\n\t& > label {\n\t\tflex: 0 0 auto;\n\t\tfont-size: 14px;\n\t\tfont-weight: 600;\n\t\tcolor: $setup-text-secondary;\n\t\twhite-space: nowrap;\n\t\tmargin-bottom: 0;\n\t}\n\n\t.forumax-inline-field {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 12px;\n\n\t\tinput[type='number'] {\n\t\t\twidth: 80px;\n\t\t\tpadding: 9px 12px;\n\t\t\tborder: 1.5px solid $setup-border;\n\t\t\tborder-radius: 8px;\n\t\t\tfont-size: 14px;\n\t\t\tcolor: $setup-text;\n\t\t\tfont-family: inherit;\n\t\t\tbackground: #fff;\n\t\t\ttext-align: center;\n\t\t\ttransition: border-color 0.2s ease, box-shadow 0.2s ease;\n\n\t\t\t&:focus {\n\t\t\t\toutline: none;\n\t\t\t\tborder-color: $setup-primary;\n\t\t\t\tbox-shadow: 0 0 0 3px rgba($setup-primary, 0.1);\n\t\t\t}\n\t\t}\n\n\t\t.forumax-field-description {\n\t\t\tmargin: 0;\n\t\t\tfont-size: 13px;\n\t\t\tcolor: $setup-text-muted;\n\t\t}\n\t}\n}\n\n\n.forumax-option-cards {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(3, 1fr);\n\tgap: 12px;\n\n\t@media (max-width: 560px) {\n\t\tgrid-template-columns: 1fr;\n\t}\n}\n\n.forumax-option-card {\n\tcursor: pointer;\n\n\tinput[type='radio'] {\n\t\tdisplay: none;\n\t}\n\n\t.forumax-option-content {\n\t\tpadding: 18px 14px;\n\t\tbackground: $setup-border-light;\n\t\tborder: 1.5px solid $setup-border;\n\t\tborder-radius: 12px;\n\t\ttext-align: center;\n\t\ttransition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n\n\t\t.dashicons {\n\t\t\tfont-size: 28px;\n\t\t\twidth: 28px;\n\t\t\theight: 28px;\n\t\t\tcolor: $setup-text-muted;\n\t\t\tmargin-bottom: 10px;\n\t\t\ttransition: transform 0.25s ease;\n\t\t}\n\n\t\th4 {\n\t\t\tmargin: 0 0 4px;\n\t\t\tfont-size: 14px;\n\t\t\tfont-weight: 600;\n\t\t\tcolor: $setup-text-secondary;\n\t\t}\n\n\t\tp {\n\t\t\tmargin: 0;\n\t\t\tfont-size: 12px;\n\t\t\tcolor: $setup-text-muted;\n\t\t\tline-height: 1.4;\n\t\t}\n\t}\n\n\tinput[type='radio']:checked ~ .forumax-option-content {\n\t\tbackground: $setup-primary-bg;\n\t\tborder-color: $setup-primary;\n\n\t\t.dashicons {\n\t\t\tcolor: $setup-primary;\n\t\t}\n\n\t\th4 {\n\t\t\tcolor: $setup-primary;\n\t\t}\n\t}\n\n\t&:hover .forumax-option-content {\n\t\tborder-color: rgba($setup-primary, 0.4);\n\t\ttransform: translateY(-2px);\n\t\tbox-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);\n\t\t\n\t\t.dashicons {\n\t\t\ttransform: scale(1.1);\n\t\t}\n\t}\n}\n\n// ─── Layout Options (Appearance step) ────────────────────────────────────────\n.forumax-layout-grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(3, 1fr);\n\tgap: 16px;\n\tmargin-bottom: 28px;\n\n\t@media (max-width: 560px) {\n\t\tgrid-template-columns: 1fr;\n\t}\n}\n\n.forumax-layout-option {\n\tcursor: pointer;\n\n\tinput[type='radio'] {\n\t\tdisplay: none;\n\t}\n\n\t.forumax-layout-preview {\n\t\tborder-radius: 8px;\n\t\toverflow: hidden;\n\t\tborder: 1.5px solid $setup-border;\n\t\ttransition: all 0.2s ease;\n\t\tbackground: #fff;\n\n\t\t.forumax-layout-preview-img {\n\t\t\theight: 64px;\n\t\t\tbackground: $setup-border-light;\n\t\t\tborder-bottom: 1px solid $setup-border;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\n\t\t\t.dashicons {\n\t\t\t\tfont-size: 28px;\n\t\t\t\twidth: 28px;\n\t\t\t\theight: 28px;\n\t\t\t\tcolor: #9ca3af;\n\t\t\t}\n\t\t}\n\n\t\t.forumax-layout-info {\n\t\t\tpadding: 10px;\n\t\t\ttext-align: center;\n\n\t\t\t.forumax-layout-title {\n\t\t\t\tdisplay: block;\n\t\t\t\tfont-size: 13px;\n\t\t\t\tfont-weight: 600;\n\t\t\t\tcolor: $setup-text-secondary;\n\t\t\t}\n\n\t\t\t.forumax-layout-desc {\n\t\t\t\tdisplay: block;\n\t\t\t\tfont-size: 11px;\n\t\t\t\tcolor: $setup-text-muted;\n\t\t\t\tmargin-top: 2px;\n\t\t\t\tline-height: 1.3;\n\t\t\t}\n\t\t}\n\t}\n\n\tinput[type='radio']:checked ~ .forumax-layout-preview {\n\t\tborder-color: $setup-primary;\n\t\tbox-shadow: 0 0 0 2px rgba($setup-primary, 0.15);\n\n\t\t.forumax-layout-preview-img {\n\t\t\tbackground: $setup-primary-bg;\n\n\t\t\t.dashicons {\n\t\t\t\tcolor: $setup-primary;\n\t\t\t}\n\t\t}\n\n\t\t.forumax-layout-title {\n\t\t\tcolor: $setup-primary;\n\t\t}\n\t}\n\n\t&:hover .forumax-layout-preview {\n\t\tborder-color: rgba($setup-primary, 0.4);\n\t}\n}\n\n// ─── Advanced Config Info Box ─────────────────────────────────────────────────\n.forumax-advanced-box {\n\tdisplay: flex;\n\tgap: 12px;\n\tpadding: 16px 18px;\n\tbackground: rgba($setup-success, 0.06);\n\tborder: 1px solid rgba($setup-success, 0.2);\n\tborder-radius: 10px;\n\tmargin-top: 8px;\n\n\t.frmx-adv-icon {\n\t\tfont-size: 18px;\n\t\tflex-shrink: 0;\n\t\tline-height: 1.5;\n\t}\n\n\t.frmx-adv-body {\n\t\t.frmx-adv-title {\n\t\t\tdisplay: block;\n\t\t\tfont-size: 14px;\n\t\t\tfont-weight: 600;\n\t\t\tcolor: darken($setup-success, 10%);\n\t\t\tmargin-bottom: 4px;\n\t\t}\n\n\t\t.frmx-adv-desc {\n\t\t\tdisplay: block;\n\t\t\tfont-size: 13px;\n\t\t\tcolor: $setup-text-muted;\n\t\t\tline-height: 1.5;\n\t\t\tmargin-bottom: 8px;\n\t\t}\n\n\t\t.frmx-adv-link {\n\t\t\tfont-size: 13px;\n\t\t\tfont-weight: 600;\n\t\t\tcolor: darken($setup-success, 5%);\n\t\t\ttext-decoration: none;\n\n\t\t\t&:hover {\n\t\t\t\ttext-decoration: underline;\n\t\t\t}\n\t\t}\n\t}\n}\n\n// ─── Complete Step ────────────────────────────────────────────────────────────\n.forumax-success-circle {\n\twidth: 88px;\n\theight: 88px;\n\tmargin: 0 auto 24px;\n\tbackground: $setup-primary;\n\tborder-radius: 50%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tanimation: frmx-success-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);\n\n\t.dashicons {\n\t\tfont-size: 48px;\n\t\twidth: 48px;\n\t\theight: 48px;\n\t\tcolor: #fff;\n\t}\n}\n\n@keyframes frmx-success-pop {\n\t0%   { transform: scale(0); opacity: 0; }\n\t100% { transform: scale(1); opacity: 1; }\n}\n\n.forumax-complete-title {\n\tfont-size: 24px;\n\tfont-weight: 700;\n\ttext-align: center;\n\tmargin: 0 0 8px;\n\tcolor: $setup-text;\n}\n\n.forumax-complete-desc {\n\tfont-size: 15px;\n\ttext-align: center;\n\tcolor: $setup-text-muted;\n\tmargin: 0 0 32px;\n\tline-height: 1.6;\n}\n\n.forumax-next-steps {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 10px;\n\tmax-width: 520px;\n\tmargin: 0 auto;\n}\n\n.forumax-next-step-card {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 14px;\n\tpadding: 14px 18px;\n\tbackground: $setup-border-light;\n\tborder: 1.5px solid $setup-border;\n\tborder-radius: 12px;\n\ttext-decoration: none;\n\ttransition: all 0.2s ease;\n\n\t.forumax-next-step-icon {\n\t\twidth: 40px;\n\t\theight: 40px;\n\t\tbackground: $setup-primary-bg;\n\t\tborder-radius: 10px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tflex-shrink: 0;\n\n\t\t.dashicons {\n\t\t\tfont-size: 20px;\n\t\t\twidth: 20px;\n\t\t\theight: 20px;\n\t\t\tcolor: $setup-primary;\n\t\t}\n\t}\n\n\t.forumax-next-step-content {\n\t\tflex: 1;\n\n\t\th3 {\n\t\t\tmargin: 0 0 2px;\n\t\t\tfont-size: 14px;\n\t\t\tfont-weight: 600;\n\t\t\tcolor: $setup-text-secondary;\n\t\t}\n\n\t\tp {\n\t\t\tmargin: 0;\n\t\t\tfont-size: 13px;\n\t\t\tcolor: $setup-text-muted;\n\t\t}\n\t}\n\n\t> .dashicons {\n\t\tflex-shrink: 0;\n\t\tfont-size: 16px;\n\t\twidth: 16px;\n\t\theight: 16px;\n\t\tcolor: #9ca3af;\n\t\ttransition: transform 0.2s ease, color 0.2s ease;\n\t}\n\n\t&:hover {\n\t\tborder-color: rgba($setup-primary, 0.35);\n\t\tbackground: rgba($setup-primary, 0.04);\n\n\t\t> .dashicons {\n\t\t\ttransform: translateX(3px);\n\t\t\tcolor: $setup-primary;\n\t\t}\n\t}\n}\n\n// ─── Upgrade Banner ───────────────────────────────────────────────────────────\n.forumax-upgrade-banner {\n\tmargin: 28px 48px;\n\tpadding: 22px 28px;\n\tbackground: linear-gradient(135deg, $setup-primary 0%, $setup-primary-light 100%);\n\tborder-radius: 12px;\n\tcolor: #fff;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tgap: 16px;\n\n\t@media (max-width: 560px) {\n\t\tflex-direction: column;\n\t\ttext-align: center;\n\t\tmargin-left: 24px;\n\t\tmargin-right: 24px;\n\t}\n\n\t.forumax-upgrade-content {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 14px;\n\t\tflex: 1;\n\n\t\t.dashicons {\n\t\t\tfont-size: 36px;\n\t\t\twidth: 36px;\n\t\t\theight: 36px;\n\t\t\tcolor: $setup-secondary;\n\t\t\tflex-shrink: 0;\n\t\t}\n\n\t\th3 {\n\t\t\tmargin: 0 0 3px;\n\t\t\tfont-size: 16px;\n\t\t\tfont-weight: 700;\n\t\t\tcolor: #fff;\n\t\t}\n\n\t\tp {\n\t\t\tmargin: 0;\n\t\t\tfont-size: 13px;\n\t\t\topacity: 0.9;\n\t\t}\n\t}\n\n\t.forumax-btn-upgrade {\n\t\tbackground: $setup-secondary;\n\t\tcolor: #1e1e2f;\n\t\tpadding: 10px 20px;\n\t\tborder-radius: 8px;\n\t\tfont-size: 14px;\n\t\tfont-weight: 700;\n\t\ttext-decoration: none;\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tgap: 6px;\n\t\ttransition: all 0.2s ease;\n\t\twhite-space: nowrap;\n\t\tborder: none;\n\n\t\t&:hover {\n\t\t\ttransform: translateY(-1px);\n\t\t\tbox-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);\n\t\t}\n\t}\n}\n\n// ─── Card Footer / Navigation ─────────────────────────────────────────────────\n.forumax-setup-card-footer {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tpadding: 20px 48px 28px;\n\tborder-top: 1px solid $setup-border-light;\n\n\t@media (max-width: 560px) {\n\t\tpadding: 16px 24px 24px;\n\t\tflex-direction: column-reverse;\n\t\tgap: 10px;\n\t}\n}\n\n// ─── Buttons ──────────────────────────────────────────────────────────────────\n.forumax-btn {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 11px 22px;\n\tborder-radius: 8px;\n\tfont-size: 14px;\n\tfont-weight: 600;\n\ttext-decoration: none;\n\ttransition: all 0.2s ease;\n\tcursor: pointer;\n\tborder: none;\n\tfont-family: inherit;\n\tline-height: 1.4;\n\n\t.dashicons {\n\t\tfont-size: 16px;\n\t\twidth: 16px;\n\t\theight: 16px;\n\t}\n\n\t&.forumax-btn-primary {\n\t\tbackground: $setup-primary;\n\t\tcolor: #fff;\n\t\tbox-shadow: 0 2px 4px rgba($setup-primary, 0.2);\n\n\t\t&:hover {\n\t\t\tbackground: $setup-primary-dark;\n\t\t\ttransform: translateY(-2px);\n\t\t\tbox-shadow: 0 6px 16px rgba($setup-primary, 0.35);\n\t\t\tcolor: #fff;\n\t\t}\n\t}\n\n\t&.forumax-btn-secondary {\n\t\tbackground: #fff;\n\t\tcolor: $setup-text-secondary;\n\t\tborder: 1.5px solid $setup-border;\n\n\t\t&:hover {\n\t\t\tborder-color: #9ca3af;\n\t\t\tcolor: $setup-text;\n\t\t}\n\t}\n\n\t&.forumax-btn-welcome {\n\t\tmargin-top: 28px;\n\t}\n}\n\n// Navigation button initial state (JS toggles)\n.forumax-btn-prev,\n.forumax-btn-finish {\n\tdisplay: none;\n}\n\n// ─── Field Validation ─────────────────────────────────────────────────────────\n.forumax-field-error {\n\tborder-color: #ef4444 !important;\n\tbox-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;\n}\n\n.forumax-error-msg {\n\tcolor: #ef4444;\n\tfont-size: 13px;\n\tmargin: 4px 0 0;\n\tanimation: frmx-error-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;\n}\n\n@keyframes frmx-error-shake {\n\t10%, 90% { transform: translate3d(-1px, 0, 0); }\n\t20%, 80% { transform: translate3d(2px, 0, 0); }\n\t30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }\n\t40%, 60% { transform: translate3d(4px, 0, 0); }\n}\n\n// ─── Setup UI Transitions ─────────────────────────────────────────────────────\n.forumax-step-animating {\n\tanimation: frmx-step-enter 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;\n}\n\n@keyframes frmx-step-enter {\n\t0% {\n\t\topacity: 0;\n\t\ttransform: translateY(12px) scale(0.99);\n\t}\n\t100% {\n\t\topacity: 1;\n\t\ttransform: translateY(0) scale(1);\n\t}\n}\n\n"],"names":[],"ignoreList":[],"sourceRoot":""}