@php
    use App\Models\BusinessAccounts;
	if(!ini_get('zlib.output_compression')){
        ob_start ("ob_gzhandler");
    }
    header("Content-type: text/css; charset: UTF-8");
    header("Cache-Control: must-revalidate");
    $offset = 60 * 60 ;
    $ExpStr = "Expires: " .
        gmdate("D, d M Y H:i:s",
            time() + $offset) . " GMT";
    header($ExpStr);

    $today = today();
    $proj = config('sys.config');
    $theme =  getActiveTheme();
    $acc = app(BusinessAccounts::class);
    $bg_color = $theme['bg_color'];
    $is_gradient_bg = isGradient($bg_color)

@endphp

{{--today{--}}
{{--    content = '{{  $acc['icon_white'] }}';--}}
{{--}--}}
body, .bg-color, #loadingDiv {
background: {{$bg_color}} fixed !important;
}
#app:not(.daterangepicker td),
#loadingDiv,
.default-font-color,
.modal, .modal-theme .modal-close,
div.bottom_ui:before, div.check_in_ui:before,
#popup-daily-checkin-body .calendar_block,
.nav-pills .nav-link.active, .nav-pills .show>.nav-link,
.challenge-item-title
{
color : {{$theme['text_color']}} !important;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
border-color: {{$theme['text_color']}} !important;
}
#popup-daily-checkin-body .calendar_block.unchecked,
.default-font-color-10
{
background : {{$theme['text_color']}}26;
}
.default-font-color-50{
color : {{$theme['text_color']}}80 !important;
}
.default-font-color-75{
color : {{$theme['text_color']}}bf !important;
}
.btn-primary:not(.daterangepicker *),
.btn-primary:not(.daterangepicker *):hover,
.btn-primary:not(.daterangepicker *):active,
.btn-primary:not(.daterangepicker *):focus,
#voucher_usage-slider .carousel-indicators li.active,
#popup_notifications .msg-box .date{
background: {{ $theme['button_bg'] }} !important;
color: {{ $theme['button_color'] }} !important;
}
.btn-outline-primary:not(.daterangepicker *),
#voucher_usage-slider .carousel-indicators li.active {
border-color: {{ $theme['text_color'] }} !important;
color: {{ $theme['text_color'] }} !important;
}
.btn-outline-primary:not(.daterangepicker *):hover,
.btn-outline-primary:not(.daterangepicker *):active,
.btn-primary:not(.daterangepicker *):focus{
background: {{ $theme['button_bg'] }} !important;
border-color: transparent !important;
}

.bg-layer-img {
@if($is_gradient_bg)
    background: {{$bg_color}} fixed;
@else
    background-color: {{$bg_color}};
    @if($theme['bg_image'])
        background-image: url(' {{$theme['bg_image']}} ');
        background-position: 50% 50%;
        background-size: cover;
        background-repeat: no-repeat;
    @endif
@endif
}

.bg-layer-gradient {
@if(!$is_gradient_bg)
    background: linear-gradient(90deg, {{$bg_color}} 0%, {{$bg_color}}00 2%, {{$bg_color}}00 98%, {{$bg_color}} 100%) fixed;
@else
    background: transparent
@endif
}

.bg-nav{
background: {{ !$is_gradient_bg? $bg_color.'EE' : $bg_color}};
}
.nav-gradient {
background: linear-gradient(0deg, {{ !$is_gradient_bg? $bg_color :'#000000'}}00 0%, #00000075 70%, #00000091 100%);
}
.bottom-gradient > .buttons{
background: linear-gradient(180deg, {{ !$is_gradient_bg? $bg_color :'#000000'}}00 0%, #00000075 70%, #00000091 100%);
}
.bg-toast{
background:{{ !$is_gradient_bg? $bg_color.'99' : $bg_color}};
}

.main-section, .modal-body{
@if(isGradient($theme['popup_bg_color']))
    background: {{$theme['popup_bg_color']}} fixed;
@else
    background-color: {{$theme['popup_bg_color']}};
    @if($theme['popup_bg_image'])
        background-image: url(' {{$theme['popup_bg_image']}} ');
        background-position: 50% 50%;
        background-size: cover;
        background-repeat: no-repeat;
    @endif
@endif
}

.main-section{
@if(filter_var($theme['bg_has_container']))
    box-shadow: 1px 5px 4px #00000029;
@else
    background: transparent;
@endif
}

.masthead-main{
background-image: url('{{$theme['masthead_main']}}') !important;
}
.masthead-popup{
background-image: url('{{$theme['masthead_popup'] ?? $theme['masthead_main']}}') !important;
}

#navbar-brand{
background-image: url('{{ $theme['logo_white'] ?  $acc['icon_white'] : $acc['icon'] }}') !important;
}

.footer{
background: {{ $theme['footer_bg_color'] }};
}
.footer *{
color: {{ $theme['footer_font_color'] }} !important;
}
{{-- ICONS --}}
{{--#check_in_btn{--}}
{{--    background-image: url('{{$theme['icons_check_in']}}') !important;--}}
{{--}--}}
{{--#daily_challenge_btn{--}}
{{--    background-image: url('{{$theme['icons_challenge']}}') !important;--}}
{{--}--}}

{{--#notification_btn{--}}
{{--    background-image: url('{{$theme['icons_notification']}}') !important;--}}
{{--}--}}

{{--#share_btn{--}}
{{--    background-image: url('{{$theme['icons_share']}}') !important;--}}
{{--}--}}

{{--#reward_redemption_btn{--}}
{{--    background-image: url('{{$theme['icons_reward']}}') !important;--}}
{{--}--}}

@if(env('SPIN_WHEEL_RING_STYLE'))
.wheel-art {
    background-image: none !important;
}
.wheel-cursor {
    border-top: none !important;
}

.game-container .spinandwin-wrap .wheel-container .wheel-inner:after {
    background: none !important;
}

.game-container .spinandwin-wrap .wheel-container .wheel-center {
    border: 0px !important;
    background: none !important;
    background: url("{{ asset('assets/images/spinandwin/spoke_needle.min.png') }}") no-repeat !important;
    background-size: contain !important;
    border-radius: 0px !important;
    transform: translate(-38%, -50%) !important;
}

.game-container .spinandwin-wrap .wheel-container .wheel-inner {
    width: 100% !important;
    height: 100% !important;
}

.game-container .spinandwin-wrap .wheel-container .wheel-outer:after {
    {{-- background: linear-gradient(45deg, #fffe96, #f7c354, #973c16) !important; --}}
    background: url("{{ asset('assets/images/spinandwin/spoke_ring.png') }}") !important;
    background-size: contain !important;
    z-index: 2 !important;
}
@endif