@import '../../Scripts/vendors/bower_components/material-design-color-palette/less/material-design-color-palette.less';
@import '../../Scripts/vendors/bower_components/bootstrap/less/variables.less';
@import 'inc/variables.less';

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

body {
    height: unset;
}

.inline-block {
    display: inline-block;
}

[vip-textarea], .vip-textarea, vip-textarea {
    white-space: pre-wrap;
}

.vip-business-info {
    .vip-business-info__list {
        div[vip-textbox], div[vip-checkbox], div[vip-time-picker] {
            .inline-block
        }

        div[vip-time-picker] {
            input.ui-timepicker-input {
                width: 70px;
            }
        }

        div[vip-day-hours] {
            .vip-day-hours__read-mode-container {
                margin-bottom: 3px;
            }
        }

        span.vip-business-info__list-hours-label {
            width: 50px;
        }
    }

    .vip-address-info > span:first-child {
        display: inline-block;
        font-weight: 500;
        color: #2e353b;
        width: 110px;
    }
}

.detail-amenities__list {
    li {
        margin-right: 4px;
    }
}

.vip-day-hours__day {
    font-weight: bold;
    margin-right: 5px;
}

.vip-day-hours__closed {
    margin-right: 5px;
}

.vip-image-preview {

    li {
        .inline-block;
        padding-right: 1px;
        padding-bottom: 1px;
    }

    .vip-image-preview__img-list {
        padding-top: 35px;
        list-style: none;
    }

    .vip-image-preview__img {
        max-width: 300px;
        height: 220px;
        border: 1px solid #616161;
        border-radius: 2px;
    }

    .vip-image-preview__remove-img {
        &:hover {
            opacity: 0.9;
        }

        i {
            cursor: pointer;

            &:hover {
                transition: 0.4s;
                transform: rotate(90deg);
            }
        }

        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
        text-align: right;
        font-size: x-large;
        padding-right: 8px;
        color: white;
        background-color: @mdc-grey-900;
        opacity: 0.7;
        position: relative;
        margin-bottom: -34px;
    }
}

.vip-light-gallery {
    cursor: pointer;
    max-height: 600px;
    position: relative;

    img {
        max-height: 100%;
        max-width: 100%;
        object-fit: fill;
        margin: auto;
        display: block;
    }

    .vip-light-gallery__more-pics {
        font-size: 40px;
        position: absolute;
        line-height: 0;
        top: 13px;
        right: 13px;
        opacity: 0.85;
        padding: 5px;
        color: white;
    }
}

.dropzone {
    border: 2px dashed #0087F7;
    border-radius: 5px;
    background: white;

    .dz-default.dz-message {
        font-size: x-large;
        font-weight: 400;
    }
}

div[vip-address] {
    .vip-map {
        height: 360px;
        width: 100%;
    }

    div[vip-textbox] {
        padding-right: 3px;
    }
}

.vip-save-button-container {
    text-align: center;

    button {
        width: 30%;
        margin-bottom: 20px;
    }
}

ul.vip-new-promoter__list {
    list-style: none;

    div[vip-new-promoter] {
        display: inline-block;
    }

    .vip-new-promoter__delete {
        font-size: large;
        cursor: pointer;
        vertical-align: middle;

        &:hover {
            transition: 0.4s;
            transform: rotate(90deg);
            color: @mdc-red-500;
        }
    }

    li {
        padding-bottom: 10px;
    }

    form {
        .vip-new-promoter__field-container {
            display: inline-block;
        }
    }
}

.vip-new-promoter__actions-container {
    padding-left: 35px;
    padding-bottom: 35px;

    i {
        font-size: larger;
        padding-right: 5px;
    }

    button {
        margin-right: 5px;
    }

    .vip-new-promoter__send-invitation {
        background-color: @mdc-green-500;
        color: white;
    }
}

.vip-promoters-pending {
    padding-left: 35px;

    i {
        vertical-align: middle;
        font-size: large;
        padding-left: 5px;
        cursor: pointer;

        &.zmdi-email {
            &:hover {
                color: #eabe21;
            }
        }

        &.zmdi-delete {
            &:hover {
                color: @mdc-red-400;
            }
        }
    }

    .vip-promoter-pending__name {
        font-weight: bold;
    }

    .vip-promoter-pending__email {
        color: @mdc-blue-500;
    }

    h2 {
        font-weight: 400;
        font-size: 17px;
    }

    ul {
        list-style: none;
        padding-left: 0;

        li {
            padding-bottom: 10px;
        }
    }
}

.vip-accept-invitation-card {
    text-align: center;

    img {
        max-width: 100%;
        max-height: 500px;
    }

    button {
        margin: auto;
        display: block;
        width: 30%;
        font-size: larger;
        margin-top: 20px;
    }
}

.vip-promoter-profile {
    .profile__review {
        margin-top: 0;
    }

    div[vip-promoter-name] {
        .vip-promoter-name__name-part {
            font-size: 23px;
        }
    }

    .vip-promoter-profile__business-link {
        a {
            color: white;
        }
    }

    .vip-promoter-profile__business-address {
        padding: 15px 0 8px 0;
    }

    .vip-wysiwyg-container {
        margin-top: -20px;
    }

    .vip-promoter-reviews {
        .vip-promoter-reviews__add-review-container, .vip-promoter-reviews__values {
            padding-bottom: 20px;
        }

        .vip-promoter-reviews__add-review-btn {
            color: white;
            background-color: @mdc-orange-500;
        }

        .vip-promoter-reviews__add-review-actions {
            .btn {
                margin-right: 5px;
            }
        }
    }

    #promoter-posts {
        margin-left: -15px;
        margin-right: -15px;
    }
}

div[vip-promoter-name] {
    margin-bottom: 3px;

    .vip-promoter-name__name-part {
        display: inline-block;
        color: #676767;
        font-weight: 400;
        margin-top: 0;
        padding-right: 3px;

        &.vip-promoter-name__nick-name:before, &.vip-promoter-name__nick-name:after {
            content: '"';
            font-family: monospace;
        }

        &.vip-promoter-name__nick-name {
            color: @mdc-blue-500;
        }
    }
}

@-webkit-keyframes rotating {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

.vip-promoter-profile {
    div[vip-profile-picture] {
        float: left;
        // change image button
        .vip-profile-picture__change-img-btn {
            width: 100%;
            background-color: @mdc-blue-grey-900;

            &:hover {
                background-color: @mdc-blue-500;
            }
        }
        // shown when uploading the profile picture
        .vip-profile-picture__uploading {
            width: 100%;
            background-color: @mdc-blue-grey-900;
            color: white;
            text-transform: uppercase;
            text-align: center;
            font-weight: 500;
            padding: 7px;

            i.zmdi-refresh {
                font-size: large;
                -webkit-animation: rotating 2.5s linear infinite;
            }
        }
        // large read mode picture container
        .vip-profile-picture__read-mode-container {
            width: 210px;
            height: 210px;
            overflow: hidden;
            background: url(../img/noprofilepic.png);
            background-size: cover;
            box-shadow: 0 -1px 15px rgba(0, 0, 0, 0.09);
            // hide it on small screens
            @media(max-width: @screen-xs-max) {
                display: none !important;
            }

            border: 5px solid white;
        }
        // small read mode picture container
        .vip-profile-picture__read-mode-container-xs {
            width: 150px;
            height: 150px;
            overflow: hidden;
            border: 5px solid white;
            // read mode and large screen OR edit mode and large screen
            @media(min-width: @screen-xs-max) {
                &.vip-rm-1, &.vip-rm-2 {
                    display: none !important;
                }
            }
            // small screen
            @media(max-width: @screen-xs-max) {
                // read mode and small screen
                &.vip-rm-1 {
                    display: block !important;
                }
                // edit mode and small screen
                &.vip-rm-2 {
                    display: none !important;
                }

                border-radius: 50%;
                box-shadow: 0 -1px 15px rgba(0,0,0,.09);
                background: url(../img/noprofilepic.png);
                background-size: cover;
            }
        }
        // edit mode container
        .vip-profile-picture__edit-mode-container {
            width: 210px;
            height: 210px;
            overflow: hidden;
            background: url(../img/noprofilepic.png);
            background-size: cover;
        }
    }

    @media (max-width: @screen-xs-max) {
        .profile__info.vip-rm-2 {
            padding-top: 225px;
        }

        .profile__img.vip-rm-2 {
            margin: -35px 0 0 -105px;
        }
    }
}

.vip-delete-mixin(@marginLeft) {
    font-size: large;
    cursor: pointer;
    position: absolute;
    left: 100%;
    margin-top: 10px;
    margin-left: @marginLeft;
    z-index: 100;

    &:hover {
        transition: 0.4s;
        transform: rotate(90deg);
        color: @mdc-red-500;
    }
}

div[vip-existing-promoters] {
    .vip-existing-promoters__img-container {
        background: url(../img/noprofilepic.png);
        background-size: cover;
    }

    .vip-existing-promoters__delete {
        .vip-delete-mixin(-23px);

        &:hover + a {
            background-color: @mdc-light-blue-50;
        }
    }

    .media-body {
        padding-left: 8px;
    }

    div[vip-promoter-name], .vip-existing-promoter__email {
        padding-top: 5px;
    }

    a.list-group-item:hover {
        background-color: @mdc-light-blue-50;
    }
}

.vip-promoter-reviews {
    .vip-promoter-reviews__delete {
        .vip-delete-mixin(-30px);
    }
}

/*VIP POSTS (plural)*/
div[vip-posts] {
    .vip-posts__post-actions {
        text-align: center;

        button {
            min-width: 140px;
            width: 31%;
            margin-right: 10px;
            margin-bottom: 20px;
            color: white;

            i {
                font-size: large;
                margin-right: 5px;
            }

            &.vip-posts__post-picture-btn {
                background-color: @mdc-blue-500;
            }

            &.vip-posts__post-video-btn {
                background-color: @mdc-red-500;
            }

            &.vip-posts__post-comment-btn {
                background-color: @mdc-orange-700;
            }
        }
    }

    .card {
        &.VideoPostDto {
            .vip-post__header {
                padding-bottom: 2px;
            }
        }

        box-shadow: 0 1px 1px 2px rgba(0,0,0,.1);

        &:hover {
            box-shadow: 0 1px 13px 2px rgba(0, 0, 0, 0.19);
        }

        .card__body {
            padding: 15px;
        }
    }
}

/*VIP POST (singular)*/
div[vip-post] {

    .vip-post__footer {
        text-align: center;
        margin-top: 8px;

        button {
            min-width: 80px;
            width: 10%;
            margin-right: 10px;
            padding: 5px;
        }
    }

    .vip-post__posted-on {
        color: @mdc-blue-500;
    }
    // for videos
    iframe {
        width: 100%;
        min-height: 480px;
        // small screen
        @media(max-width: @screen-xs-max) {
            min-height: 260px;
        }
    }

    div[vip-video] {
        margin-left: -14px;
        margin-right: -14px;
    }
}

/* vip-promoter-dropdown*/
.vip-promoter-dropdown__dropdown-item {
    td {
        padding-right: 5px;
    }
}

.vip-want-to-go {
    .card__body {
        padding: 0px 30px 30px 30px;
    }

    .radio {
        label {
            padding-left: 2px;
        }
    }
}


.vip-attending-request-card {
    text-align: center;

    .vip-attending-request-card__business-name {
        color: @mdc-blue-500;
    }

    img {
        max-width: 70%;
        max-height: 250px;
    }

    .vip-attending-request-card__request-details {
        table {
            text-align: left;
            margin: auto;
            font-size: larger;

            tr {
                td {
                    padding-top: 10px;

                    &:first-child {
                        padding-right: 5px;
                        font-weight: bold;

                        &:after {
                            content: ':';
                        }
                    }
                }
            }
        }
    }

    .vip-attending-request-card__actions {
        margin-top: 20px;

        button {
            margin: 5px;
            display: inline-block;
            width: 20%;
            min-width: 70px;
        }
    }
}

/* Home page */
.vip-home-container.container {
    width: 100%;

    .header__search {
        @media(max-width: @screen-xs-max) {
            padding: 0;
        }
    }

    .search {
        .search__body {
            display: flex;
            padding-left: 0;

            input {
                flex: 1;
            }
        }
    }
}

.vip-home-container {
    .search__body {
        input {
            @media(max-width: @screen-xs-max) {
                padding: 1px 10px;
            }
        }
    }
}

.vip-home-search-result-container {
    padding: 0px 20px !important;
    text-align: center;

    .highlight{
        color: @mdc-blue-500;
        font-weight: bold;
    }

    @media(max-width: @screen-xs-max) {
        padding: 0 !important;
    }

    .vip-home-search-result-item {
        text-align: left;

        @media(max-width: @screen-md-max) {
            width: 30%;
            min-width: 314px;
        }

        @media(max-width: @screen-sm-max) {
            width: 40%;
            min-width: 295px;
        }

        @media(max-width: @screen-xs-max) {
            width: 100%;
            max-width: 500px;
            margin: 0;
        }

        min-width: 288px;
        width: 23%;
        margin-bottom: 5px !important;

        img {
            -webkit-transform: scale(1);
            transform: scale(1);
            -webkit-transition: .5s ease-in-out;
            transition: .5s ease-in-out;
            width: 100%;
            height: 180px;
            object-fit: cover;

            @media(max-width: @screen-xs-max) {
                max-height: 350px;
                height: 100%;
            }
        }

        &:hover img {
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
        }

        .listings-grid__main {
            overflow: hidden;
        }
    }
}

.vip-loader-mixin(@size) {
    border: 5px solid white; /* Light grey */
    border-top: 5px solid @mdc-blue-500; /* Blue */
    border-radius: 50%;
    width: @size;
    height: @size;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

.vip-loader {
    .vip-loader-mixin(40px);
}

.my-location__title{
    color: unset;
    span{
        color: @mdc-blue-500;
    }
}