/* =====================================
   AD DETAIL
===================================== */

:root{
    --border:#e5e7eb;
    --text:#1d1d1f;
    --muted:#6e6e73;

    --blue:#1976d2;
    --red:#d32f2f;
    --orange:#ff7a00;

    
}


/* =====================================
   CARD
===================================== */

.ad-card{
    border:3px solid silver;
    border-radius:0 0 10px 10px;
    max-width:900px;
    margin:0 auto;
    background:#fff;
}


/* =====================================
   FRAME COLORS (z DB)
===================================== */

.ad-card.frame-green{
    border-color:green;
    background:#BAFFBA;
}

.ad-card.frame-gold{
    border-color:yellow;
    background:#FFFF8F;
}

.ad-card.frame-blue{
    border-color:#00FFFF;
    background:#ABC7DE;
}

.ad-card.frame-silver{
    border-color:silver;
    background:#fff;
}

.ad-card.frame-orange{
    border-color:#f39c12;
}

.ad-card.frame-purple{
    border-color:#9b59b6;
}


/* =====================================
   TITLE
===================================== */

.ad-title{
    font-size:1.8rem;
    font-weight:600;
    letter-spacing:-0.4px;
    margin:0 0 10px 0;
    color:var(--text);
}

.ad-top-label{
    color:silver;
    font-size:10px;
    font-weight:800;
}


/* =====================================
   DESCRIPTION
===================================== */

.ad-row{
    display:flex;
    border-bottom:2px solid #eee;
}

.ad-row:last-child{
    border-bottom:none;
}

.ad-row:first-child{
    padding:8px 0;
}


/* =====================================
   CONTACT
===================================== */

.ad-tlf-contact{
    font-size:1rem;
    font-weight:600;
    margin:0 0 10px 0;
}

.ad-email{
    width:100%;
    padding:6px;
}


/* =====================================
   DETAILS TABLE
===================================== */

.ad-details{
    margin-top:20px;
    border:0;
    overflow:hidden;
}

.ad-label{
    width:50%;
     font-family: "IBM Plex Mono", monospace;

    padding:4px 6px;
    font-weight:300;
    font-style:italic;
}

.ad-value{
 font-family: "IBM Plex Mono", monospace;

    width:50%;
    padding:4px 6px;
    text-align:right;
}


/* =====================================
   IMAGES
===================================== */

.ad-images{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:16px;
}

.ad-images img{
    height: auto;
    width: 100%;
    border-radius:6px;
}


/* =====================================
   ACTION BUTTONS (TOP)
===================================== */

.ad-actions{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-bottom:-2px;
}


/* common */

.btn-highlight,
.btn-top-ad{
    position:relative;
    display:inline-block;
    padding:8px 18px;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
    border-radius:10px;
    border:3px solid silver;
}


/* highlight */

.btn-highlight{
    color:#fff;
    background:var(--orange);
}

.btn-highlight:hover{
    background:#fff3e6;
    color:#666;
}


/* top */

.btn-top-ad{
    color:#fff;
    background:linear-gradient(135deg,#ffb300,#ff7a00);
}

.btn-top-ad:hover{
    filter:brightness(1.05);
}


/* badge */

.badge-top{
    position:absolute;
    top:-10px;
    left:50%;
    transform:translateX(-50%);
    background:#e53935;
    color:#fff;
    font-size:10px;
    font-weight:700;
    padding:3px 7px;
    border-radius:20px;
    letter-spacing:.5px;
}


/* =====================================
   BOTTOM ACTIONS
===================================== */

.ad-actions-bottom{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:12px;
}


/* buttons */

.btn-edit,
.btn-delete,
.btn-report{
    display:inline-block;
    padding:6px 18px;
    font-weight:600;
    text-decoration:none;
    border-radius:10px;
    border:2px solid transparent;
}


/* edit */

.btn-edit{
    color:var(--blue);
    background:#fff;
    border-color:var(--blue);
}

.btn-edit:hover{
    background:#eef5ff;
}


/* delete */

.btn-delete{
    color:var(--red);
    background:#fff;
    border-color:var(--red);
}

.btn-delete:hover{
    background:#ffecec;
}


/* report */

.btn-report{
    color:var(--orange);
    background:#fff;
    border-color:var(--orange);
}

.btn-report:hover{
    background:#fff3e6;
}


/* =====================================
   PHONE VERIFY BOX
===================================== */

#verifyBox{
    margin-top:10px;
}

#verifyStatus{
    margin-top:6px;
}

#smsBox{
    margin-top:10px;
}


/* =====================================
   MOBILE
===================================== */

@media (max-width:768px){

    .ad-card{
        padding:6px;
    }

    .ad-title{
        font-size:1.4rem;
    }

   
}