| 1 |
{"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,oBCnHF,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}","@use \"sass:color\";\n\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: color.adjust($dashboard-secondary, $lightness: -10%, $space: hsl);\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: color.adjust($dashboard-warning, $lightness: -15%, $space: hsl);\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, color.adjust($dashboard-secondary, $lightness: -10%, $space: hsl));\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","@use \"sass:color\";\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%, color.adjust($frmx-amber, $lightness: -8%, $space: hsl) 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%, color.adjust($frmx-purple-700, $lightness: -6%, $space: hsl) 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, color.adjust($frmx-purple-700, $lightness: -6%, $space: hsl) 0%, color.adjust($frmx-purple-700, $lightness: -12%, $space: hsl) 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: color.adjust($frmx-green, $lightness: -8%, $space: hsl);\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: color.adjust($frmx-amber, $lightness: -8%, $space: hsl);\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, color.adjust($frmx-indigo, $lightness: 12%, $space: hsl)); }\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, color.adjust($frmx-teal, $lightness: 12%, $space: hsl)); }\n\t&:nth-child(4):hover::before { background: linear-gradient(90deg, $frmx-amber, color.adjust($frmx-amber, $lightness: 12%, $space: hsl)); }\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","@use \"sass:color\";\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: color.adjust($setup-info, $lightness: -10%, $space: hsl);\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: color.adjust($setup-success, $lightness: -10%, $space: hsl);\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: color.adjust($setup-success, $lightness: -5%, $space: hsl);\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":""} |
