/* =====================================================
   Hidden Content Scanner
   Phishbowl Theme
===================================================== */


/* -------------------------
   Variables
-------------------------- */

:root {

    --bg: #050505;

    --card: #181818;

    --card-light: #222222;

    --primary: #12B8A6;

    --primary-dark: #0e8f82;

    --success: #2ecc71;

    --warning: #e0a800;

    --danger: #e74c3c;

    --text: #ffffff;

    --text-light: #c9c9c9;

    --muted: #888888;

    --border: #333333;

    --shadow:
        0 15px 40px rgba(0,0,0,0.45);

}





/* -------------------------
   Reset
-------------------------- */

* {

    box-sizing: border-box;

}


body {

    margin: 0;

    background:
        linear-gradient(
            180deg,
            #050505,
            #111111
        );

    color: var(--text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

}





/* -------------------------
   Container
-------------------------- */


.scanner-container {

    width: 100%;

    max-width: 900px;

    margin: 0 auto;

    padding: 40px 20px;

}





/* -------------------------
   Hero
-------------------------- */


.hero {
    
    color: #ffffff !important;
    
    text-align: center;

    margin-bottom: 30px;

}


#hiddenContentScanner .hero h1 {

    color: #ffffff !important;

    font-size: 42px;

    margin-bottom: 15px;

    font-weight: 700;

}



.subtitle {

    color: var(--text-light);

    font-size: 18px;

    line-height: 1.6;

    max-width: 750px;

    margin:
        0 auto;

}





/* -------------------------
   Cards
-------------------------- */


.card {

    background:
        var(--card);

    border:

        1px solid var(--border);

    border-radius:

        20px;

    padding:

        32px;

    box-shadow:

        var(--shadow);

}





.hidden {

    display: none !important;

}


/* -------------------------
   Status Messages
-------------------------- */

.status-message {

    margin-top:20px;

    padding:16px;

    border-radius:12px;

    text-align:left;

    font-size:15px;

    line-height:1.5;

}


.status-message.error {

    background:
        rgba(231,76,60,0.12);

    border:
        1px solid var(--danger);

    color:
        #ff8a80;

}


/* -------------------------
   Upload Area
-------------------------- */


.upload-card {

    text-align: center;

}




.drop-zone {

    background:

        rgba(
            18,
            184,
            166,
            0.08
        );

    border:
        2px dashed #888;

    border-radius:
        18px;

    padding:
        45px 20px;

    transition:
        all .25s ease;

    cursor:
        pointer;

}

.drop-zone h2 {

    color:
        #0b1f1b !important;

}

.drop-zone p {

    color:
        #555 !important;

}



.drop-zone:hover,

.drop-zone.drag-over {


    border-color:

        var(--primary);


    background:

        rgba(
            18,
            184,
            166,
            0.08
        );


}





.upload-icon {


    font-size:

        65px;


    margin-bottom:

        15px;


    transition:

        transform .25s ease;


}

/* .upload-icon {

    width: 20px;
    height: 20px;

    margin-right: 8px;

    vertical-align: middle;

} */



.drop-zone.drag-over .upload-icon {


    transform:

        scale(1.1);


}





.drop-zone h2 {

    color: #ffffff !important;

    margin: 10px 0;

    font-size: 24px;

}



.drop-zone p {


    color:

        var(--text-light);


    margin:

        10px 0;


}





/* -------------------------
   Buttons
-------------------------- */


button {


    font-family:

        inherit;


    cursor:

        pointer;


}





#browseBtn,

.analyse-btn {


    border:

        none;


    background:

        var(--primary);


    color:

        #000;


    font-size:

        17px;


    font-weight:

        700;


    padding:

        14px 32px;


    border-radius:

        12px;


    transition:

        all .2s ease;


}





#browseBtn:hover,

.analyse-btn:hover {


    background:

        var(--primary-dark);


    transform:

        translateY(-2px);


}




.analyse-btn {


    width:

        100%;


    margin-top:

        25px;


}





.analyse-btn:disabled {


    background:

        #444;


    color:

        #888;


    cursor:

        not-allowed;


    transform:

        none;


}

.store-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.store-buttons img {
    height: 55px;
    width: auto;
    display: block;
}

.apple-badge {
    height: 38px;
}

.google-badge {
    width: 130px;
    height: auto;
}






/* -------------------------
   Selected File
-------------------------- */


.selected-file {


    background:

        var(--card-light);


    border-radius:

        14px;


    padding:

        18px;


    margin-top:

        25px;


}



.file-info {


    display:

        flex;


    align-items:

        center;


    gap:

        15px;


}



.file-icon {


    font-size:

        35px;


}



.file-name {


    font-weight:

        700;


    word-break:

        break-word;


}



.file-size {


    color:

        var(--text-light);


    margin-top:

        5px;


}



.remove-file-btn {


    margin-left:

        auto;


    background:

        transparent;


    color:

        var(--danger);


    border:

        none;


    font-size:

        22px;


}






/* -------------------------
   Formats
-------------------------- */


.supported-files {


    margin-top:

        30px;


}


.supported-files h3 {


    margin-bottom:

        15px;


}



.format-grid {


    display:

        flex;


    flex-wrap:

        wrap;


    gap:

        10px;


    justify-content:

        center;


}



.format {


    padding:

        8px 14px;


    border-radius:

        20px;


    font-size:

        14px;


}



.supported {


    border:

        1px solid var(--success);


    color:

        var(--success);


}



.unsupported {


    border:

        1px solid #555;


    color:

        #777;


}





.max-size {


    color:

        var(--text-light);


    margin-top:

        18px;


}





/* -------------------------
   Daily Limit
-------------------------- */


.daily-limit {


    margin-top:

        25px;


    color:

        var(--text-light);


}





/* -------------------------
   Privacy
-------------------------- */


.privacy {


    margin-top:

        25px;


    padding:

        15px;


    background:

        #111;


    border-radius:

        12px;


    color:

        var(--text-light);


    font-size:

        14px;


    line-height:

        1.5;


}







/* -------------------------
   Loading
-------------------------- */


.loading-card {


    text-align:

        center;


}



.spinner {


    width:

        65px;


    height:

        65px;


    border:

        5px solid #333;


    border-top:

        5px solid var(--primary);


    border-radius:

        50%;


    margin:

        0 auto 25px;


    animation:

        spin 1s linear infinite;


}



@keyframes spin {


    from {

        transform:

            rotate(0deg);

    }


    to {

        transform:

            rotate(360deg);

    }


}




.analysing-file {


    color:

        var(--text-light);


    margin:

        15px 0 30px;


    font-size:

        16px;


}





/* -------------------------
   Timeline
-------------------------- */


.progress-timeline {


    text-align:

        left;


}



.progress-item {


    padding:

        12px 0;


    color:

        #666;


    border-bottom:

        1px solid #292929;


}



.progress-item span {


    display:

        inline-block;


    width:

        30px;


}





.progress-item.active {


    color:

        var(--primary);


}





/* -------------------------
   Results
-------------------------- */


.result-header {


    text-align:

        center;


    margin-bottom:

        25px;


}


.result-header p {


    color:

        var(--text-light);


}

/* ==========================================
   Scanner Report Cards
========================================== */

.scanner-reports {

    margin-top: 24px;

}


.scanner-card {

    background: #1b1b1b;

    border: 1px solid #333;

    border-radius: 14px;

    padding: 20px;

    margin-bottom: 18px;

    transition: all 0.2s ease;

}


.scanner-card:hover {

    border-color: #444;

}


/* Left accent colour */

.scanner-card.success {

    border-left: 5px solid #32d583;

}

.scanner-card.warning {

    border-left: 5px solid #f5b301;

}

.scanner-card.error {

    border-left: 5px solid #ef4444;

}


/* ==========================================
   Header
========================================== */

.scanner-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 18px;

    gap: 20px;

}


.scanner-title {

    display: flex;

    align-items: center;

    gap: 12px;

}


.scanner-title h3 {

    margin: 0;

    font-size: 1.05rem;

    color: #ffffff;

}


/* ==========================================
   Status Icon
========================================== */

.scanner-icon {

    width: 36px;

    height: 36px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 15px;

    font-weight: 700;

    background: #222;

    border: 2px solid #444;

    flex-shrink: 0;

}


.scanner-card.success {

    border-left: 4px solid #2E7D5A;

}

.scanner-card.warning {

    border-left: 4px solid #B8860B;

}

.scanner-card.error {

    border-left: 4px solid #A63D40;

}


/* ==========================================
   Status Badge
========================================== */

.scanner-status {

    font-size: 12px;

    font-weight: 600;

    padding: 4px 10px;

    border-radius: 999px;

    letter-spacing: 0.3px;

    text-transform: uppercase;

}


.scanner-card.success .scanner-icon {

    color: #2E7D5A;

    border-color: #2E7D5A;

}

.scanner-card.warning .scanner-icon {

    color: #B8860B;

    border-color: #B8860B;

}

.scanner-card.error .scanner-icon {

    color: #A63D40;

    border-color: #A63D40;

}

.scanner-card.success .scanner-status {

    background: rgba(46,125,90,0.18);
    color: #2E7D5A;

}

.scanner-card.warning .scanner-status {

    background: rgba(184,134,11,0.18);
    color: #B8860B;

}

.scanner-card.error .scanner-status {

    background: rgba(166,61,64,0.18);
    color: #A63D40;

}


/* ==========================================
   Findings
========================================== */

.scanner-body {

    display: flex;

    flex-direction: column;

    gap: 14px;

}


.scan-detail {

    display: flex;

    align-items: flex-start;

    gap: 14px;

    line-height: 1.6;

}


.detail-icon {

    width: 24px;

    text-align: center;

    font-size: 16px;

    flex-shrink: 0;

}


.detail-text {

    color: #d5d5d5;

}


/* Individual row colours */

.detail-clear .detail-icon {

    color: #2E7D5A;

}

.detail-warning .detail-icon {

    color: #B8860B;

}

.detail-error .detail-icon {

    color: #A63D40;

}


/* ==========================================
   Mobile
========================================== */

@media (max-width: 700px) {

    .scanner-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;

    }

}







/* -------------------------
   Scanner Reports
-------------------------- */


#scannerReports {


    margin-top:

        25px;


}





.report-item {


    background:

        var(--card-light);


    border-radius:

        12px;


    padding:

        18px;


    margin-bottom:

        12px;


}

.risk-title {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 18px;

}

.risk-title h2 {

    margin: 0;

    line-height: 1.3;

    font-size: 1.5rem;

    color: #fff;

}


.risk-dot {

    width: 16px;

    height: 16px;

    border-radius: 50%;

    background: #222;

    border: 3px solid;

    flex-shrink: 0;

}

.risk-clear .risk-dot {

    border-color: #2E7D5A;

}

.risk-medium .risk-dot {

    border-color: #B8860B;

}

.risk-high .risk-dot {

    border-color: #A63D40;

}

.risk-card {

    padding: 28px;

    border-radius: 16px;

    background: #1b1b1b;

    border: 1px solid #333;

    margin-bottom: 24px;

}

.risk-clear {

    border-left: 5px solid #2E7D5A;

}

.risk-medium {

    border-left: 5px solid #B8860B;

}

.risk-high {

    border-left: 5px solid #A63D40;

}

.risk-card p {
    margin-top: 16px;
    line-height: 1.7;
    font-size: 1rem;
}


.scan-summary {

    display: flex;
    flex-direction: column;
    gap: 12px;

    margin-top: 16px;
    padding: 16px;

    border-radius: 12px;

    background: #2b2b2b;

}


.summary-item {

    display: flex;
    justify-content: space-between;
    align-items: center;

    font-size: 15px;

    color: #ffffff;

}


.summary-item span {

    color: #dddddd;

}


.summary-item strong {

    color: #ffffff !important;

    font-size: 16px;

    font-weight: 700;

}






/* -------------------------
   Responsive
-------------------------- */


@media(max-width:600px){


    .scanner-container {


        padding:

            25px 15px;


    }



    .hero h1 {


        font-size:

            32px;


    }



    .subtitle {


        font-size:

            16px;


    }



    .card {


        padding:

            22px;


    }



    .drop-zone {


        padding:

            35px 15px;


    }
    
    .store-buttons {

        gap: 10px;
        margin-top: 15px;

    }

    .google-badge {

        width: 110px;
        height: auto;

    }

    .apple-badge {

        height: 32px;
        width: auto;

    }
    



}

/* -------------------------
   WordPress Theme Overrides
-------------------------- */

#hiddenContentScanner .drop-zone h2,
#hiddenContentScanner .hero h1 {

    color: #ffffff !important;

}


#hiddenContentScanner .hero .subtitle {

    color: rgba(255,255,255,0.85) !important;

}