/* ---------- My Ads ---------- */

/* ============================================================
   My Ads — STYLES
   Keep page/component styles in logical sections below.
   ============================================================ */

/* =========================================================
   APEMART.LK — MY ADS
   Premium marketplace management surface
   Page-local styling only. Existing JS/API functionality kept.
========================================================= */

:root{
    --myads-orange:#f97316;
    --myads-orange-2:#fb923c;
    --myads-ink:#1f2937;
    --myads-muted:#6b7280;
    --myads-line:#e5e7eb;
    --myads-bg:#f7f8fa;
    --myads-soft:#fff7ed;
}

.my-ads-page{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:22px 24px 60px !important;
    min-height:calc(100vh - 72px);
    box-sizing:border-box;
    background:linear-gradient(180deg,#fff 0,#f8f9fb 260px,#f7f8fa 100%) !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    color:var(--myads-ink);
}

.my-ads-page > *{
    max-width:1280px;
    margin-left:auto;
    margin-right:auto;
}

.my-ads-breadcrumb-row{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:7px;
    margin:0 auto 16px !important;
    padding:0 2px;
    font-size:12px;
    line-height:1.4;
    color:#8a929d;
}

.my-ads-breadcrumb-row a{
    color:#e85d04;
    text-decoration:none;
    font-weight:800;
}
.my-ads-breadcrumb-row a:hover{text-decoration:underline}
.my-ads-breadcrumb-row span{color:#b8bec6;font-size:15px}
.my-ads-breadcrumb-row strong{color:#66707c;font-weight:700}

.my-ads-heading{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:20px;
    margin-bottom:20px !important;
}

.my-ads-eyebrow{
    margin-bottom:6px;
    color:var(--myads-orange);
    font-size:10px;
    font-weight:900;
    letter-spacing:1.6px;
}

.my-ads-heading h1{
    margin:0;
    color:var(--myads-ink);
    font-size:28px;
    line-height:1.2;
    font-weight:900;
    letter-spacing:-.5px;
}

.my-ads-heading p{
    margin:6px 0 0;
    color:var(--myads-muted);
    font-size:13px;
    line-height:1.5;
}

.my-ads-new-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0 17px;
    border-radius:13px;
    background:linear-gradient(135deg,var(--myads-orange),var(--myads-orange-2));
    color:#fff !important;
    text-decoration:none;
    font-size:13px;
    font-weight:900;
    box-shadow:0 10px 22px rgba(249,115,22,.20);
    transition:.18s ease;
}
.my-ads-new-btn:hover{transform:translateY(-2px);box-shadow:0 13px 27px rgba(249,115,22,.25)}

/* Status selector — same visual language as Promote page steps/cards */
.my-ads-page > .my-ads-tabs{
    width:100%;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    gap:7px;
    padding:7px;
    margin-bottom:12px !important;
    background:#fff;
    border:1px solid var(--myads-line);
    border-radius:16px;
    box-shadow:0 5px 16px rgba(15,23,42,.035);
}

.my-ads-tab{
    flex:1 1 0;
    min-width:0;
    min-height:42px;
    border:0;
    border-radius:11px;
    background:transparent;
    color:#64748b;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:9px 12px;
    font-family:inherit;
    font-size:12px;
    font-weight:850;
    cursor:pointer;
    transition:.18s ease;
}
.my-ads-tab:hover{background:#f8fafc;color:#374151}
.my-ads-tab.active-tab{
    background:linear-gradient(135deg,var(--myads-orange),var(--myads-orange-2));
    color:#fff;
    box-shadow:0 7px 17px rgba(249,115,22,.20);
}
.my-ads-tab .tab-icon{font-size:13px;line-height:1}
.my-ads-tab .tab-label{white-space:nowrap}
.my-ads-tab .tab-count{
    min-width:21px;
    height:21px;
    padding:0 6px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:#f1f5f9;
    color:#475569;
    font-size:10px;
    font-weight:900;
}
.my-ads-tab.active-tab .tab-count{background:rgba(255,255,255,.92);color:#ea580c}
.my-ads-tab.pending-tab .tab-count{background:#fff7ed;color:#d97706}
.my-ads-tab.rejected-tab .tab-count{background:#fef2f2;color:#dc2626}
.my-ads-tab.deleted-tab .tab-count{background:#f3f4f6;color:#4b5563}

/* Type selector */
.my-ads-page > .my-ads-type-tabs{
    width:100%;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    gap:8px;
    padding:7px;
    margin-bottom:22px !important;
    background:#fbfcfd;
    border:1px solid #e8ebef;
    border-radius:15px;
}

.my-ads-type-tab{
    flex:0 1 auto;
    min-height:38px;
    border:1px solid transparent;
    border-radius:10px;
    background:transparent;
    color:#64748b;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:8px 14px;
    font-family:inherit;
    font-size:11px;
    font-weight:850;
    cursor:pointer;
    transition:.18s ease;
}
.my-ads-type-tab:hover{background:#fff;border-color:#e5e7eb;color:#374151}
.my-ads-type-tab.active{
    background:#fff4e9;
    border-color:#fed7aa;
    color:#c2410c;
    box-shadow:0 3px 9px rgba(249,115,22,.06);
}
.type-icon{font-size:13px;line-height:1}
.type-label{white-space:nowrap}
.type-count{
    min-width:20px;
    height:20px;
    padding:0 5px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:#f1f5f9;
    color:#64748b;
    font-size:10px;
    font-weight:900;
}
.my-ads-type-tab.active .type-count{background:#ffedd5;color:#c2410c}

/* Advertisement grid */
.my-ads-page > .grid{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
    align-items:start;
}

.ad-card{
    min-width:0;
    overflow:hidden;
    background:#fff;
    border:1px solid #e6e9ed;
    border-radius:18px;
    box-shadow:0 7px 22px rgba(15,23,42,.055);
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.ad-card:hover{
    transform:translateY(-4px);
    border-color:#dfe3e8;
    box-shadow:0 14px 30px rgba(15,23,42,.09);
}

.ad-card > img{
    display:block;
    width:100%;
    height:210px;
    object-fit:cover;
    background:#f1f5f9;
}

.ad-body{padding:15px 16px 16px}

.ad-card-top{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:7px;
    margin-bottom:9px;
    min-height:25px;
}

.ad-status,.ad-type-badge{
    display:inline-flex;
    align-items:center;
    gap:5px;
    min-height:24px;
    padding:4px 8px;
    border-radius:999px;
    font-size:9px;
    font-weight:900;
    line-height:1;
}
.ad-status{background:#ecfdf3;color:#15803d}
.pending-status{background:#fff7ed;color:#b45309}
.rejected-status{background:#fef2f2;color:#b91c1c}
.deleted-status{background:#f1f5f9;color:#64748b}
.ad-type-badge{border:1px solid #e5e7eb;background:#f8fafc;color:#64748b}
.auction-badge{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}
.fixed-badge{background:#f0fdf4;border-color:#bbf7d0;color:#15803d}
.donate-badge{background:#fff7ed;border-color:#fed7aa;color:#c2410c}

.ad-body h3{
    margin:0 0 7px;
    color:#1f2937;
    font-size:16px;
    line-height:1.35;
    font-weight:850;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.ad-price{
    margin-bottom:9px;
    color:#111827;
    font-size:21px;
    line-height:1.2;
    font-weight:950;
    letter-spacing:-.25px;
}

.ad-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin:0 0 10px;
    color:#7a8492;
    font-size:10px;
}
.ad-meta span{
    display:inline-flex;
    align-items:center;
    gap:4px;
}
.ad-type-row{
    margin:0 0 14px;
}

.ad-location{
    margin-bottom:10px;
    padding-top:9px;
    border-top:1px solid #f0f2f4;
    color:#64748b;
    font-size:11px;
    line-height:1.8;
}

.ad-actions{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
    width:100%;
}

.ad-action-btn{
    min-width:0;
    min-height:38px;
    padding:7px 5px;
    border:1px solid transparent;
    border-radius:10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    font-family:inherit;
    font-size:10px;
    font-weight:900;
    line-height:1;
    cursor:pointer;
    box-shadow:0 3px 8px rgba(15,23,42,.07);
    transition:.17s ease;
}
.ad-action-btn span:first-child{font-size:12px}
.ad-action-btn:hover{transform:translateY(-2px);box-shadow:0 7px 14px rgba(15,23,42,.11)}
.ad-action-btn:active{transform:translateY(0)}
.ad-action-btn:focus-visible{outline:3px solid rgba(249,115,22,.20);outline-offset:2px}

.edit-btn{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;border-color:#16a34a}
.promote-btn{background:linear-gradient(135deg,#ff9f1a,#f97316);color:#fff;border-color:#f97316}
.reserve-btn{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-color:#2563eb}
.sold-btn{background:linear-gradient(135deg,#14b8a6,#0f766e);color:#fff;border-color:#0f766e}
.pause-btn{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border-color:#d97706}
.resume-btn{background:linear-gradient(135deg,#06b6d4,#0891b2);color:#fff;border-color:#0891b2}
.renew-btn{background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;border-color:#7c3aed}
.delete-btn{background:linear-gradient(135deg,#f43f5e,#dc2626);color:#fff;border-color:#dc2626}

.ad-deleted-label{
    grid-column:1/-1;
    min-height:38px;
    padding:9px 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:#f1f5f9;
    color:#64748b;
    font-size:11px;
    font-weight:900;
}

.empty-state{
    grid-column:1/-1;
    width:100%;
    box-sizing:border-box;
    padding:58px 24px;
    text-align:center;
    background:#fff;
    border:1px dashed #d9dee5;
    border-radius:18px;
    box-shadow:0 5px 16px rgba(15,23,42,.035);
}
.empty-state h2{margin:0 0 8px;color:#27313d;font-size:21px}
.empty-state p{margin:0 0 18px;color:#6b7280;font-size:12px;line-height:1.6}
.empty-state a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:0 17px;
    border-radius:11px;
    background:linear-gradient(135deg,var(--myads-orange),var(--myads-orange-2));
    color:#fff;
    text-decoration:none;
    font-size:12px;
    font-weight:900;
}

/* Tablet */
@media(max-width:1050px){
    .my-ads-page{padding-left:18px !important;padding-right:18px !important}
    .my-ads-page > .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
}

/* Mobile */
@media(max-width:700px){
    .my-ads-page{padding:16px 12px 42px !important}
    .my-ads-breadcrumb-row{font-size:11px;margin-bottom:13px !important}
    .my-ads-heading{grid-template-columns:1fr;gap:13px;margin-bottom:16px !important}
    .my-ads-heading h1{font-size:23px}
    .my-ads-heading p{font-size:12px}
    .my-ads-new-btn{width:100%;box-sizing:border-box}
    .my-ads-page > .my-ads-tabs{overflow-x:auto;scrollbar-width:none;margin-bottom:10px !important}
    .my-ads-page > .my-ads-tabs::-webkit-scrollbar{display:none}
    .my-ads-tab{flex:0 0 auto;padding:8px 11px;min-width:max-content}
    .my-ads-page > .my-ads-type-tabs{overflow-x:auto;scrollbar-width:none;margin-bottom:17px !important}
    .my-ads-page > .my-ads-type-tabs::-webkit-scrollbar{display:none}
    .my-ads-type-tab{flex:0 0 auto;padding:8px 11px}
    .my-ads-page > .grid{grid-template-columns:1fr;gap:14px}
    .ad-card > img{height:220px}
}

@media(max-width:430px){
    .my-ads-heading h1{font-size:21px}
    .ad-card > img{height:205px}
    .ad-body{padding:14px}
    .ad-price{font-size:20px}
    .ad-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:360px){
    .my-ads-tab{padding-left:9px;padding-right:9px;font-size:11px}
    .my-ads-tab .tab-icon{display:none}
    .ad-action-btn{font-size:9px}
}

/* =========================================================
   My Ads — Home-style advertisement information cards
   Page-local enhancement only.
========================================================= */
.ad-card-media{
    position:relative;
    display:block;
    width:100%;
    height:210px;
    overflow:hidden;
    background:#f1f5f9;
    text-decoration:none;
}
.ad-card-media > img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}
.ad-image-status{
    position:absolute;
    top:11px;
    left:11px;
    display:inline-flex;
    align-items:center;
    gap:5px;
    min-height:25px;
    padding:5px 9px;
    border-radius:999px;
    background:rgba(255,255,255,.94);
    box-shadow:0 4px 12px rgba(15,23,42,.10);
    font-size:9px;
    font-weight:900;
}
.ad-image-status.active-status{color:#15803d}
.ad-image-status.pending-status{color:#b45309}
.ad-image-status.rejected-status{color:#b91c1c}
.ad-image-status.deleted-status{color:#64748b}

.ad-title{
    margin:0 0 7px;
    color:#202938;
    font-size:16px;
    line-height:1.35;
    font-weight:850;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
}
.ad-detail-row{
    display:flex;
    align-items:center;
    gap:7px;
    margin:3px 0;
    color:#7b8492;
    font-size:11px;
    line-height:1.4;
}
.ad-detail-row > i{
    width:13px;
    flex:0 0 13px;
    text-align:center;
    color:#9aa3ae;
}
.ad-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:7px 10px;
    margin:4px 0 2px;
    padding:9px 0 8px;
    color:#9aa3ae;
    font-size:10px;
    line-height:1.3;
}
.ad-meta span{
    display:inline-flex;
    align-items:center;
    gap:4px;
}
.ad-price.donate-price{color:#e45d00}
.ad-type-row{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
    margin:4px 0 14px;
}
.myads-info-chip{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:5px 8px;
    border-radius:999px;
    font-size:9px;
    font-weight:900;
    line-height:1;
}
.myads-info-chip.fixed-chip{background:#fff4e9;color:#e45d00}
.myads-info-chip.auction-chip{background:#f2efff;color:#6847b9}
.myads-info-chip.donate-chip{background:#fff0f1;color:#d43b4a}
.myads-info-chip.delivery-chip{background:#eef8f1;color:#2f7d46}

.ad-actions{margin-top:auto}
.ad-action-btn i{font-size:11px;line-height:1}
.ad-action-btn span{line-height:1}

@media(max-width:700px){
    .ad-card-media{height:205px}
    .ad-body{padding:13px 13px 14px}
    .ad-title{font-size:15px}
    .ad-price{font-size:19px}
    .ad-detail-row{font-size:10px}
    .ad-meta{font-size:9px}
    .myads-info-chip{font-size:8px;padding:5px 7px}
}

@media(max-width:430px){
    .ad-card-media{height:205px}
    .ad-title{font-size:15px}
    .ad-price{font-size:19px}
    .ad-meta{font-size:8.5px}
    .ad-action-btn{min-height:39px;font-size:10px}
}