﻿/* ============================================
   Cashit.in — Master Page Enhancement CSS
   Scoped only — no global resets
   Safe alongside bootstrap / style.css / main.css
   ============================================ */

/* --- CSS Variables --- */
:root {
    --c-primary: #00b386;
    --c-primary-dark: #009970;
    --c-bg-dark: #1a1a2e;
    --c-bg-footer: #12121f;
    --c-radius: 10px;
    --c-transition: .22s ease;
}

/* ============================================
   HEADER
   ============================================ */

#header-three {
    position: sticky;
    top: 0;
    z-index: 1050;
    box-shadow: 0 2px 16px rgba(0,0,0,.15);
}

    /* Logo */
    #header-three .logo-area img {
        height: 38px;
        width: auto;
    }

    /* Nav links */
    #header-three .cp-main-menu nav > ul > li > a {
        color: #2b3743;
        font-weight: 500;
        font-size: .9rem;
        border-radius: 6px;
        padding: 8px 14px;
        transition: background var(--c-transition);
    }

        #header-three .cp-main-menu nav > ul > li > a:hover {
            background: rgba(255,255,255,.15);
            color: #8b99a7;
        }

    /* Dropdown */
    #header-three .cp-dropdown-menu {
        border-radius: var(--c-radius);
        box-shadow: 0 8px 28px rgba(0,0,0,.14);
        border: none;
        overflow: hidden;
        padding: 6px 0;
    }

        #header-three .cp-dropdown-menu li a:hover {
            background: rgba(0,179,134,.1);
            color: var(--c-primary) !important;
        }

/* Hide the stray <hr> after header */
header > hr,
#wrapper > hr {
    display: none;
}

/* ============================================
   FOOTER
   ============================================ */

footer {
    background: var(--c-bg-dark);
    color: rgba(255,255,255,.82);
}

    footer .footer-area-top {
        padding-top: 52px;
        padding-bottom: 36px;
    }

    /* Section headings */
    footer .title-medium-light {
        color: #fff;
        font-size: .82rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .07em;
        margin-bottom: 16px;
        display: block;
        position: relative;
        padding-bottom: 10px;
    }

        footer .title-medium-light::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 30px;
            height: 2px;
            background: var(--c-primary);
            border-radius: 2px;
        }

    /* Social icons */
    footer .social-link {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding-left: 0 !important;
    }

        footer .social-link li {
            list-style: none;
        }

            footer .social-link li a {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 38px;
                height: 38px;
                border-radius: 50%;
                background: rgba(255,255,255,.08);
                border: 1px solid rgba(255,255,255,.12);
                transition: background var(--c-transition), transform var(--c-transition);
            }

                footer .social-link li a:hover {
                    background: var(--c-primary);
                    border-color: var(--c-primary);
                    transform: translateY(-2px);
                }

                footer .social-link li a img {
                    width: 18px;
                    height: 18px;
                    object-fit: contain;
                    filter: brightness(0) invert(1);
                    display: inline-block;
                }

    /* Useful links */
    footer .useful-link {
        padding-left: 0 !important;
    }

        footer .useful-link li {
            list-style: none;
            margin-bottom: 9px;
        }

            footer .useful-link li a {
                font-size: .88rem;
                color: rgba(255,255,255,.6);
                transition: color var(--c-transition), padding-left var(--c-transition);
            }

                footer .useful-link li a:hover {
                    color: var(--c-primary);
                    padding-left: 4px;
                }

    /* Quick links */
    footer .quikc-link-wrp {
        border-top: 1px solid rgba(255,255,255,.08);
        padding-top: 24px;
        margin-top: 16px;
    }

        footer .quikc-link-wrp ul {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
            padding-left: 0 !important;
        }

            footer .quikc-link-wrp ul li {
                list-style: none;
            }

                footer .quikc-link-wrp ul li a {
                    display: inline-block;
                    font-size: .76rem;
                    color: rgba(255,255,255,.5);
                    padding: 4px 10px;
                    border: 1px solid rgba(255,255,255,.1);
                    border-radius: 20px;
                    transition: border-color var(--c-transition), color var(--c-transition), background var(--c-transition);
                    white-space: nowrap;
                }

                    footer .quikc-link-wrp ul li a:hover {
                        border-color: var(--c-primary);
                        color: var(--c-primary);
                        background: rgba(0,179,134,.08);
                    }

    /* Accordion panel */
    footer .panel {
        background: transparent;
        border-color: rgba(255,255,255,.1);
        border-radius: var(--c-radius);
    }

    footer .panel-title a {
        color: rgba(255,255,255,.65);
        font-size: .88rem;
    }

    footer .panel-body a {
        display: inline-block;
        font-size: .76rem;
        color: rgba(255,255,255,.5);
        margin: 3px;
        padding: 3px 8px;
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 14px;
        transition: color var(--c-transition), border-color var(--c-transition);
    }

        footer .panel-body a:hover {
            color: var(--c-primary);
            border-color: var(--c-primary);
        }

    /* Footer bottom */
    footer .footer-area-bottom {
        background: var(--c-bg-footer);
        border-top: 1px solid rgba(255,255,255,.06);
        padding: 16px 0;
    }

        footer .footer-area-bottom p {
            font-size: .82rem;
            color: rgba(255,255,255,.4);
            text-align: center;
        }

            footer .footer-area-bottom p a {
                color: rgba(255,255,255,.55);
            }

                footer .footer-area-bottom p a:hover {
                    color: var(--c-primary);
                }

        footer .footer-area-bottom img {
            display: inline-block;
            height: 14px;
            width: auto;
            vertical-align: middle;
            margin-left: 4px;
            filter: brightness(0) invert(.5);
        }

/* ============================================
   MODALS
   ============================================ */

.verify-mobile-section .modal-content {
    border: none;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,.18);
}

.verify-mobile-section .modal-header {
    background: var(--c-primary);
    padding: 14px 20px;
    border-bottom: none;
    min-height: auto;
}

    .verify-mobile-section .modal-header .glyphicon {
        color: #fff;
    }

.verify-mobile-section .modal-body {
    padding: 28px 20px;
}

.verify-mobile-section .otp-screen {
    letter-spacing: .3em;
    font-size: 1.3rem;
    font-weight: 700;
    text-align: center;
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    width: 100%;
    outline: none;
    transition: border-color var(--c-transition);
}

    .verify-mobile-section .otp-screen:focus {
        border-color: var(--c-primary);
    }

.cp-default-btn-lg {
    display: inline-block;
    background: var(--c-primary) !important;
    color: #fff !important;
    border: none;
    border-radius: 8px;
    padding: 11px 28px;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--c-transition), transform var(--c-transition);
    margin-top: 12px;
}

    .cp-default-btn-lg:hover {
        background: var(--c-primary-dark) !important;
        color: #fff !important;
        transform: translateY(-1px);
    }

.resendt-bt {
    font-size: .85rem;
    color: var(--c-primary) !important;
    font-weight: 600;
    background: none;
    border: none;
    padding: 0;
    margin-top: 8px;
    display: inline-block;
    cursor: pointer;
}

    .resendt-bt:hover {
        text-decoration: underline;
    }

#timerDiv span {
    font-weight: 700;
    color: #e74c3c;
}

/* ============================================
   SCROLL UP
   ============================================ */
#scrollUp {
    background: var(--c-primary) !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(0,179,134,.4);
    bottom: 24px !important;
    right: 24px !important;
}

    #scrollUp:hover {
        background: var(--c-primary-dark) !important;
    }

/* ============================================
   AUTOCOMPLETE
   ============================================ */
.ui-autocomplete {
    border: 1px solid #eee !important;
    border-radius: var(--c-radius) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.12) !important;
    background: #fff !important;
    padding: 4px 0 !important;
    max-height: 340px;
    overflow-y: auto;
    z-index: 9999 !important;
}

.ui-menu-item-wrapper.ui-state-active {
    background: rgba(0,179,134,.08) !important;
    border: none !important;
    color: #1a1a2e !important;
}
