.adp-favicon-studio{
    --adp-orange:#fc9012;
    --adp-blue:#00bddd;
    --adp-selected:#0874d9;
    --adp-text:#202b3c;
    --adp-muted:#6f7b8b;
    --adp-border:#e0e6ed;
    --adp-soft:#f7f9fb;
    --adp-white:#ffffff;

    direction:rtl;
    width:100%;
    font-family:
        "IBM Plex Sans Arabic",
        system-ui,
        sans-serif;
}

.adp-favicon-studio *,
.adp-favicon-studio *::before,
.adp-favicon-studio *::after{
    box-sizing:border-box;
}

.adp-favicon-layout{
    width:100%;
    max-width:1280px;
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(0,1fr) 370px;
    gap:28px;
    align-items:start;
}

.adp-favicon-library,
.adp-favicon-editor{
    background:var(--adp-white);
    border:1px solid var(--adp-border);
    border-radius:18px;
}

.adp-favicon-library{
    min-height:620px;
    padding:28px;
}

.adp-favicon-editor{
    padding:20px;
    position:sticky;
    top:28px;
}

.adp-favicon-section-head{
    margin-bottom:22px;
}

.adp-favicon-section-head h2{
    margin:0 0 7px;
    color:var(--adp-text);
    font-size:28px;
    line-height:1.35;
    font-weight:700;
}

.adp-favicon-section-head p{
    margin:0;
    color:var(--adp-muted);
    font-size:14px;
    line-height:1.8;
}

.adp-favicon-search-wrap{
    width:100%;
}

.adp-favicon-search-wrap input{
    display:block;
    width:100%;
    height:52px;
    padding:0 17px;
    border:1px solid var(--adp-border);
    border-radius:11px;
    outline:none;
    background:#fff;
    color:var(--adp-text);
    font:inherit;
    transition:border-color .18s ease,box-shadow .18s ease;
}

.adp-favicon-search-wrap input:focus{
    border-color:var(--adp-blue);
    box-shadow:0 0 0 3px rgba(0,189,221,.10);
}

.adp-favicon-search-wrap input::placeholder{
    color:#9aa4b1;
}

.adp-favicon-grid{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:11px;
    margin-top:22px;
}

.adp-favicon-icon{
    appearance:none;
    display:flex;
    min-width:0;
    min-height:84px;
    padding:11px 7px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;

    border:1px solid var(--adp-border);
    border-radius:12px;
    background:#fff;

    color:#253142;
    cursor:pointer;
    transition:
        border-color .16s ease,
        background .16s ease,
        transform .16s ease,
        box-shadow .16s ease;
}

.adp-favicon-icon:hover{
    border-color:var(--adp-blue);
    background:#f7fcfd;
    box-shadow:0 5px 14px rgba(25,42,62,.06);
    transform:translateY(-1px);
}

.adp-favicon-icon.is-active{
    border-color:var(--adp-selected);
    background:var(--adp-selected);
    color:#fff;
}

.adp-favicon-icon svg{
    display:block;
    width:32px;
    height:32px;

    /*
     * Preserve the original SVG geometry.
     * We change currentColor only.
     */
    color:inherit;
}

.adp-favicon-icon span{
    display:block;
    width:100%;
    overflow:hidden;

    color:inherit;
    font-size:11px;
    line-height:1.25;
    font-weight:500;

    white-space:nowrap;
    text-overflow:ellipsis;
    text-align:center;
}

.adp-favicon-status{
    padding:20px 0 7px;
    text-align:center;
    color:var(--adp-muted);
    font-size:13px;
}

.adp-favicon-more{
    display:block;
    min-width:145px;
    min-height:44px;
    margin:12px auto 0;
    padding:9px 18px;

    border:1px solid #d5dde6;
    border-radius:10px;
    background:#fff;

    color:var(--adp-text);
    font:inherit;
    font-weight:700;
    cursor:pointer;
}

.adp-favicon-more:hover{
    border-color:var(--adp-blue);
    background:#f4fcfe;
}

.adp-favicon-preview-card{
    padding:18px;
    border-radius:15px;
    background:var(--adp-soft);
    text-align:center;
}

.adp-favicon-preview-label{
    display:block;
    margin-bottom:13px;
    color:var(--adp-muted);
    font-size:12px;
}

#adpFaviconCanvas{
    display:block;
    width:220px;
    height:220px;
    max-width:100%;
    margin:0 auto;
    border-radius:18px;
    background:#fff;
    box-shadow:0 10px 28px rgba(20,35,55,.09);
}

.adp-favicon-controls{
    display:grid;
    gap:0;
    margin-top:20px;
}

.adp-favicon-controls label{
    display:grid;
    grid-template-columns:112px minmax(0,1fr);
    gap:12px;
    align-items:center;

    min-height:52px;
    padding:8px 0;

    border-bottom:1px solid #edf1f5;
}

.adp-favicon-controls label span{
    color:var(--adp-text);
    font-size:13px;
    font-weight:700;
}

.adp-favicon-controls input[type="color"]{
    width:56px;
    height:38px;
    padding:2px;

    border:1px solid #d6dee7;
    border-radius:8px;
    background:#fff;
    cursor:pointer;
}

.adp-favicon-controls select{
    width:100%;
    min-width:0;
    height:42px;
    padding:0 10px;

    border:1px solid #d6dee7;
    border-radius:9px;
    background:#fff;

    color:var(--adp-text);
    font:inherit;
}

.adp-favicon-controls input[type="range"]{
    width:100%;
    accent-color:var(--adp-blue);
}

.adp-favicon-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    margin-top:20px;
}

.adp-favicon-actions button{
    appearance:none;
    display:flex;
    align-items:center;
    justify-content:center;

    min-height:50px;
    padding:9px 8px;

    border:1px solid #d5dde6;
    border-radius:10px;
    background:#fff;

    color:var(--adp-text);
    opacity:1;
    visibility:visible;

    font:inherit;
    font-size:12px;
    line-height:1.35;
    font-weight:700;

    cursor:pointer;
    transition:.16s ease;
}

.adp-favicon-actions button:hover{
    border-color:var(--adp-blue);
    background:#f1fbfd;
}

.adp-favicon-actions button.primary{
    border-color:var(--adp-orange);
    background:var(--adp-orange);
    color:#fff;
}

.adp-favicon-actions button.primary:hover{
    border-color:#e9820a;
    background:#e9820a;
}

@media(max-width:1050px){
    .adp-favicon-layout{
        grid-template-columns:1fr;
    }

    .adp-favicon-editor{
        position:static;
    }
}

@media(max-width:760px){
    .adp-favicon-library{
        padding:20px;
    }

    .adp-favicon-grid{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }
}

@media(max-width:520px){
    .adp-favicon-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .adp-favicon-controls label{
        grid-template-columns:1fr;
        gap:7px;
    }

    .adp-favicon-actions{
        grid-template-columns:1fr;
    }
}

/* ===== FAVICON STUDIO V1.5 COLOR BEHAVIOR ===== */

/* Default library icon color = AdawatiPlus orange */
.adp-favicon-icon{
    color:#fc9012 !important;
}

/* Keep icon orange on hover */
.adp-favicon-icon:hover{
    color:#fc9012 !important;
    background:#fffaf4 !important;
    border-color:#00bddd !important;
}

/* SVG follows card color */
.adp-favicon-icon svg{
    color:inherit !important;
}

/* Keep text dark */
.adp-favicon-icon span{
    color:#253142 !important;
}

/* Active card remains blue with white icon/text */
.adp-favicon-icon.is-active{
    background:#0b73d9 !important;
    border-color:#0b73d9 !important;
    color:#ffffff !important;
}

.adp-favicon-icon.is-active svg{
    color:#ffffff !important;
}

.adp-favicon-icon.is-active span{
    color:#ffffff !important;
}

/* Hover must not override active state */
.adp-favicon-icon.is-active:hover{
    background:#0b73d9 !important;
    border-color:#0b73d9 !important;
    color:#ffffff !important;
}

/* ===== END V1.5 ===== */

/* ===== ADP FAVICON HERO FULL BACKGROUND START ===== */

.adp-favicon-hero{
    position:relative !important;
    width:100% !important;
    max-width:1480px !important;
    min-height:470px !important;
    margin:12px auto 34px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;

    overflow:hidden !important;

    border:1px solid #e5ebf1 !important;
    border-radius:26px !important;

    background-image:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.00) 0%,
            rgba(255,255,255,0.03) 42%,
            rgba(255,255,255,0.60) 62%,
            rgba(255,255,255,0.92) 78%,
            rgba(255,255,255,0.99) 100%
        ),
        url('https://adawatiplus.online/wp-content/uploads/2026/08/ChatGPT-Image-10-أغسطس-2026،-06_44_02-م.png') !important;

    background-size:cover !important;
    background-position:left center !important;
    background-repeat:no-repeat !important;

    box-shadow:
        0 18px 45px rgba(31,45,61,.06) !important;
}

/* Old separate image block is no longer needed */
.adp-favicon-hero__visual{
    display:none !important;
}

/* Text on right side */
.adp-favicon-hero__content{
    position:relative !important;
    z-index:2 !important;

    width:46% !important;
    margin-right:0 !important;
    margin-left:auto !important;

    padding:54px 58px !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:flex-start !important;

    text-align:right !important;

    background:transparent !important;
}

.adp-favicon-hero__badge{
    margin-bottom:17px !important;

    background:rgba(255,255,255,.88) !important;

    border:1px solid rgba(252,144,18,.28) !important;
    border-radius:999px !important;

    color:#df7600 !important;
}

.adp-favicon-hero h1{
    margin:0 !important;

    color:#182338 !important;

    font-size:46px !important;
    line-height:1.25 !important;
    font-weight:800 !important;
}

.adp-favicon-hero h1 span{
    display:block !important;

    margin-top:7px !important;

    color:#00a9c8 !important;

    font-size:.68em !important;
    line-height:1.45 !important;
}

.adp-favicon-hero p{
    max-width:560px !important;

    margin:20px 0 0 !important;

    color:#5c687a !important;

    font-size:17px !important;
    line-height:1.95 !important;
}

.adp-favicon-hero__cta{
    margin-top:26px !important;

    min-height:52px !important;
    padding:12px 26px !important;

    border-radius:11px !important;

    background:#fc9012 !important;
    color:#fff !important;

    text-decoration:none !important;

    box-shadow:
        0 8px 22px rgba(252,144,18,.22) !important;
}

.adp-favicon-hero__cta:hover{
    background:#eb820a !important;
    transform:translateY(-2px);
}

/* Tablet */
@media(max-width:1024px){

    .adp-favicon-hero{
        min-height:420px !important;

        background-position:28% center !important;
    }

    .adp-favicon-hero__content{
        width:52% !important;
        padding:40px 34px !important;
    }

    .adp-favicon-hero h1{
        font-size:38px !important;
    }

    .adp-favicon-hero p{
        font-size:15.5px !important;
    }
}

/* Mobile */
@media(max-width:767px){

    .adp-favicon-hero{
        min-height:590px !important;

        align-items:flex-end !important;

        background-image:
            linear-gradient(
                180deg,
                rgba(255,255,255,0.00) 0%,
                rgba(255,255,255,0.10) 38%,
                rgba(255,255,255,0.88) 56%,
                rgba(255,255,255,1.00) 70%
            ),
            url('https://adawatiplus.online/wp-content/uploads/2026/08/ChatGPT-Image-10-أغسطس-2026،-06_44_02-م.png') !important;

        background-size:auto 62% !important;
        background-position:center top !important;
        background-repeat:no-repeat !important;

        background-color:#fff !important;
    }

    .adp-favicon-hero__content{
        width:100% !important;

        margin:0 !important;

        padding:270px 24px 30px !important;

        align-items:center !important;

        text-align:center !important;
    }

    .adp-favicon-hero h1{
        font-size:31px !important;
    }

    .adp-favicon-hero p{
        margin-top:15px !important;

        font-size:15px !important;
        line-height:1.85 !important;
    }

    .adp-favicon-hero__cta{
        width:100% !important;
        justify-content:center !important;
    }
}

/* ===== ADP FAVICON HERO FULL BACKGROUND END ===== */