/* =========================================================
   PAREACLUB PROFESSIONAL 3D BUTTONS V2
   PC + ANDROID
   VISUAL SKIN ONLY

   ΔΕΝ αλλάζει:
   width / height / padding / margin
   position / display / grid / flex
   viewport / scaling / Android layout
========================================================= */


/* =========================================================
   BASE 3D BUTTON
========================================================= */

#mainApp button {

    background:
        linear-gradient(
            180deg,
            #263c54 0%,
            #172a40 22%,
            #0d1c2d 58%,
            #07111d 100%
        ) !important;

    border-color:
        #d6a72b !important;

    color:
        #f4f8ff !important;

    text-shadow:
        0 1px 1px rgba(0,0,0,.95),
        0 0 4px rgba(255,255,255,.12) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.23),
        inset 0 -2px 0 rgba(0,0,0,.60),
        inset 0 0 8px rgba(0,150,255,.07),
        0 2px 3px rgba(0,0,0,.55),
        0 0 5px rgba(219,166,31,.14) !important;

    transition:
        background .14s ease,
        box-shadow .14s ease,
        border-color .14s ease,
        filter .14s ease !important;

    -webkit-tap-highlight-color:
        transparent;
}


/* =========================================================
   ICONS INSIDE BUTTONS
========================================================= */

#mainApp button svg,
#mainApp button i,
#mainApp button .svg-inline--fa {

    filter:
        drop-shadow(0 1px 0 rgba(0,0,0,.95))
        drop-shadow(0 0 3px rgba(0,170,255,.70)) !important;
}


/* =========================================================
   PC HOVER
   Δεν μετακινεί το κουμπί
========================================================= */

@media (hover:hover) and (pointer:fine) {

    #mainApp button:hover {

        background:
            linear-gradient(
                180deg,
                #304d69 0%,
                #1a3550 24%,
                #10263d 58%,
                #091725 100%
            ) !important;

        border-color:
            #ffd45a !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.30),
            inset 0 -2px 0 rgba(0,0,0,.62),
            0 3px 5px rgba(0,0,0,.60),
            0 0 9px rgba(255,192,34,.25) !important;

        filter:
            brightness(1.07);
    }
}


/* =========================================================
   PRESSED 3D EFFECT
   Χωρίς αλλαγή θέσης / transform
========================================================= */

#mainApp button:active {

    background:
        linear-gradient(
            180deg,
            #091522 0%,
            #102337 45%,
            #182f46 100%
        ) !important;

    box-shadow:
        inset 0 3px 6px rgba(0,0,0,.82),
        inset 0 0 5px rgba(0,140,255,.12),
        0 1px 1px rgba(0,0,0,.70) !important;

    filter:
        brightness(.92);
}


/* =========================================================
   EXIT
========================================================= */

#mainApp #logoutBtn {

    background:
        linear-gradient(
            180deg,
            #74323a 0%,
            #4c1d25 32%,
            #2b0f15 68%,
            #16080b 100%
        ) !important;

    border-color:
        #ff9b45 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.24),
        inset 0 -2px 0 rgba(0,0,0,.65),
        0 2px 3px rgba(0,0,0,.60),
        0 0 7px rgba(255,62,62,.22) !important;
}


/* =========================================================
   SETTINGS
========================================================= */

#mainApp #settingsBtn {

    background:
        linear-gradient(
            180deg,
            #245f8d 0%,
            #174466 30%,
            #0e2b44 65%,
            #081827 100%
        ) !important;

    border-color:
        #28b5ff !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.27),
        inset 0 -2px 0 rgba(0,0,0,.62),
        0 2px 3px rgba(0,0,0,.60),
        0 0 8px rgba(0,170,255,.28) !important;
}


/* =========================================================
   DJ PLAYER
========================================================= */

#mainApp #openDjPlayerBtn {

    background:
        linear-gradient(
            180deg,
            #284c68 0%,
            #17344e 32%,
            #0d2438 67%,
            #071622 100%
        ) !important;

    border-color:
        #e6ae32 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.24),
        inset 0 -2px 0 rgba(0,0,0,.62),
        0 2px 3px rgba(0,0,0,.58),
        0 0 7px rgba(0,169,255,.18) !important;
}


/* =========================================================
   SEND BUTTONS
========================================================= */

#mainApp button[type="submit"] {

    background:
        linear-gradient(
            180deg,
            #45a3ff 0%,
            #1477e8 36%,
            #0750b5 70%,
            #043278 100%
        ) !important;

    border-color:
        #64c4ff !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.42),
        inset 0 -2px 0 rgba(0,35,100,.68),
        0 2px 3px rgba(0,0,0,.58),
        0 0 8px rgba(0,125,255,.32) !important;
}


/* =========================================================
   SELECTED / ACTIVE CONTROLS
========================================================= */

#mainApp button.active,
#mainApp button.selected,
#mainApp button[aria-selected="true"],
#mainApp button[aria-pressed="true"] {

    background:
        linear-gradient(
            180deg,
            #287643 0%,
            #18572f 35%,
            #0d3b20 70%,
            #072515 100%
        ) !important;

    border-color:
        #56ef79 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.24),
        inset 0 -2px 0 rgba(0,0,0,.62),
        0 2px 3px rgba(0,0,0,.58),
        0 0 8px rgba(49,239,95,.24) !important;
}


/* =========================================================
   DISABLED
========================================================= */

#mainApp button:disabled {

    filter:
        grayscale(.35)
        brightness(.72) !important;

    box-shadow:
        inset 0 2px 4px rgba(0,0,0,.65) !important;
}


/* =========================================================
   TOUCH / ANDROID
   ΜΟΝΟ ελαφρύτερο shadow για καλύτερη απόδοση.
   ΚΑΜΙΑ αλλαγή layout.
========================================================= */

@media (hover:none) and (pointer:coarse) {

    #mainApp button {

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.19),
            inset 0 -2px 0 rgba(0,0,0,.62),
            0 1px 2px rgba(0,0,0,.58),
            0 0 4px rgba(218,165,31,.12) !important;
    }

    #mainApp button svg,
    #mainApp button i,
    #mainApp button .svg-inline--fa {

        filter:
            drop-shadow(0 1px 0 rgba(0,0,0,.9))
            drop-shadow(0 0 2px rgba(0,160,255,.55)) !important;
    }
}