/* ════════════════════════════════════════════════════════════
   EASYDEKHO — SELLER ACCOUNT UNIFIED BLUE THEME
   File: css/my_account/seller_account_theme.css
   ════════════════════════════════════════════════════════════ */

/* ── RESET & FONT ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body.sel-body {
    font-family: 'Inter', Arial, sans-serif;
    background: #f0f4ff;
    color: #1a1a2e;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* ── CSS VARIABLES ── */
:root {
    --blue:        #1565c0;
    --blue-dark:   #0d47a1;
    --blue-light:  #1976d2;
    --blue-pale:   #e3f2fd;
    --blue-border: #bbdefb;
    --teal:        #00838f;
    --teal-pale:   #e0f7fa;
    --bg:          #f0f4ff;
    --card:        #ffffff;
    --text:        #1a1a2e;
    --sub:         #546e7a;
    --border:      #e8eef6;
    --shadow:      rgba(21,101,192,0.12);
    --hdr-h:       56px;
    --radius:      14px;
    --radius-sm:   10px;
}

/* Kill old purple */
[style*="#800080"],[style*="#8b008b"],[style*="purple"],[style*="#BA55D3"] {
    color: var(--blue) !important;
}

/* ════ HEADER ════ */
.sel-hdr {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    height: var(--hdr-h);
    display: flex; align-items: center;
    padding: 0 12px;
    background: linear-gradient(135deg, #0d47a1 0%, #1565c0 60%, #1976d2 100%);
    box-shadow: 0 2px 10px rgba(13,71,161,0.30);
    gap: 10px;
}
.sel-hdr--brand .sel-hdr__menu {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,0.15); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 16px; flex-shrink: 0;
}
.sel-hdr__logo {
    display: flex; align-items: center; gap: 8px;
    text-decoration: none; flex: 1; min-width: 0;
}
.sel-hdr__logo-img { width: 28px; height: 28px; border-radius: 6px; object-fit: contain; }
.sel-hdr__logo-name {
    font-size: 17px; font-weight: 700; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sel-hdr--inner .sel-hdr__back {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,0.15); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 15px; flex-shrink: 0;
}
.sel-hdr__page-title {
    flex: 1; font-size: 16px; font-weight: 700; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sel-hdr__right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.sel-hdr__icon-btn {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,0.12); border: none;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 16px; text-decoration: none; cursor: pointer;
}
.sel-hdr__user {
    display: flex; align-items: center; gap: 7px;
    text-decoration: none; cursor: pointer; padding: 4px 6px;
    border-radius: 20px;
}
.sel-hdr__avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,0.25); border: 1.5px solid rgba(255,255,255,0.5);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.sel-hdr__avatar--sm { width: 28px; height: 28px; font-size: 12px; }
.sel-hdr__uname {
    font-size: 13px; font-weight: 600; color: #fff;
    max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    display: none;
}
.sel-hdr__caret { color: rgba(255,255,255,0.8); font-size: 11px; }
@media (min-width: 480px) { .sel-hdr__uname { display: block; } }

/* ── User Dropdown ── */
.sel-user-dd {
    display: none;
    position: absolute; top: calc(var(--hdr-h) + 4px); right: 10px;
    background: #fff; border-radius: var(--radius);
    box-shadow: 0 8px 30px rgba(13,71,161,0.18);
    min-width: 210px; z-index: 1100; overflow: hidden;
    animation: ddFadeIn 0.18s ease-out;
}
.sel-user-dd.open { display: block; }
@keyframes ddFadeIn {
    from { opacity:0; transform: translateY(-6px); }
    to   { opacity:1; transform: translateY(0); }
}
.sel-user-dd__name {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; background: var(--blue-pale);
    border-bottom: 1px solid var(--blue-border);
}
.sel-user-dd__avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--blue); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 700; flex-shrink: 0;
}
.sel-user-dd__nm { font-size: 13px; font-weight: 700; color: var(--text); }
.sel-user-dd__role { font-size: 11px; color: var(--sub); margin-top: 1px; }
.sel-user-dd a {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 16px; font-size: 13px; color: var(--text) !important;
    text-decoration: none !important;
}
.sel-user-dd a:hover { background: var(--blue-pale); color: var(--blue) !important; }
.sel-user-dd a i { width: 16px; color: var(--blue); font-size: 14px; }
.sel-user-dd__divider { height: 1px; background: var(--border); margin: 4px 0; }
.sel-user-dd__logout { color: #e53935 !important; }
.sel-user-dd__logout i { color: #e53935 !important; }
.sel-user-dd__logout:hover { background: #fdecea !important; }

/* ════ SIDE DRAWER ════ */
.sel-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.45); z-index: 1200;
}
.sel-overlay.open { display: block; }
.sel-drawer {
    position: fixed; top: 0; left: -290px; bottom: 0;
    width: 280px; background: #fff; z-index: 1300;
    box-shadow: 4px 0 20px rgba(13,71,161,0.20);
    transition: left 0.28s cubic-bezier(0.4,0,0.2,1);
    display: flex; flex-direction: column; overflow: hidden;
}
.sel-drawer.open { left: 0; }
.sel-drawer__hdr {
    background: linear-gradient(135deg, #0d47a1, #1565c0);
    padding: 20px 16px 16px;
    display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.sel-drawer__avatar {
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(255,255,255,0.22); border: 2px solid rgba(255,255,255,0.45);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.sel-drawer__info { flex: 1; min-width: 0; }
.sel-drawer__name { font-size: 15px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-drawer__role { font-size: 11px; color: rgba(255,255,255,0.75); margin-top: 2px; }
.sel-drawer__close {
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,0.18); border: none; cursor: pointer;
    color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sel-drawer__body { flex: 1; overflow-y: auto; padding: 8px 0; }
.sel-drawer__item {
    display: flex; align-items: center; gap: 14px;
    padding: 13px 20px; font-size: 14px; color: #1a1a2e !important;
    text-decoration: none !important;
}
.sel-drawer__item i { width: 18px; color: #546e7a; font-size: 15px; }
.sel-drawer__item:hover,
.sel-drawer__item.active { background: var(--blue-pale); color: var(--blue) !important; }
.sel-drawer__item.active { font-weight: 600; border-left: 3px solid var(--blue); }
.sel-drawer__item.active i,
.sel-drawer__item:hover i { color: var(--blue); }
.sel-drawer__divider { height: 1px; background: var(--border); margin: 6px 0; }
.sel-drawer__item--logout { color: #e53935 !important; }
.sel-drawer__item--logout i { color: #e53935; }
.sel-drawer__item--logout:hover { background: #fdecea; }

/* ════ PAGE WRAPPER ════ */
.sel-wrap, #wrap {
    padding-top: var(--hdr-h);
    background: var(--bg);
    min-height: 100vh;
}
#account_deshboard_wrap {
    background: var(--bg) !important;
    max-width: 900px;
    margin: 0 auto;
    padding: 12px 12px 80px;
}
#account_deshboard_cont { background: var(--bg) !important; }

/* ════ INNER PAGE TITLE BAR ════ */
#my_profile_modify_details {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #fff !important;
    border-radius: var(--radius) !important;
    padding: 14px 16px !important;
    margin-bottom: 14px !important;
    box-shadow: 0 1px 6px var(--shadow) !important;
    gap: 10px !important;
}
#my_profile_modify_details h1 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--blue) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
#my_profile_modify_details h1 i { color: var(--blue) !important; }
#my_profile_modify_details span a,
.duration_button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: linear-gradient(135deg, #1565c0, #0d47a1) !important;
    color: #fff !important;
    padding: 9px 16px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 8px var(--shadow) !important;
    border: none !important;
}

/* ════ PRODUCT MANAGER ════ */
#my_listing_details {
    background: #fff !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 1px 6px var(--shadow) !important;
    margin-bottom: 12px !important;
    overflow: hidden !important;
}
#my_listing_image { padding: 12px !important; flex-shrink: 0 !important; }
#my_listing_img img {
    width: 90px !important; height: 90px !important;
    object-fit: cover !important;
    border-radius: var(--radius-sm) !important;
    border: 1.5px solid var(--blue-border) !important;
    display: block !important;
}
#my_listing_img_details { margin-top: 6px !important; }
#my_listing_img_details span a {
    font-size: 11px !important; color: var(--blue) !important;
    text-decoration: none !important; font-weight: 500 !important;
    display: flex !important; align-items: center !important; gap: 4px !important;
}
#my_listing_product_details { padding: 12px 14px 12px 4px !important; flex: 1 !important; }
#my_listing_pro_name { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; gap: 8px !important; }
#my_listing_product_name h3 {
    font-size: 13.5px !important; font-weight: 700 !important;
    color: var(--text) !important; line-height: 1.4 !important; margin: 0 0 4px !important;
}
#my_listing_product_name span a { font-size: 11px !important; color: var(--teal) !important; text-decoration: none !important; font-weight: 500 !important; }
#my_listing_pro_action { display: flex !important; flex-direction: column !important; gap: 6px !important; flex-shrink: 0 !important; }
#my_listing_pro_action span a {
    display: inline-flex !important; align-items: center !important; gap: 5px !important;
    padding: 6px 14px !important; border-radius: 16px !important;
    font-size: 11.5px !important; font-weight: 600 !important; text-decoration: none !important; white-space: nowrap !important;
}
#my_listing_pro_action span:first-child a { background: var(--blue-pale) !important; color: var(--blue) !important; border: 1px solid var(--blue-border) !important; }
#my_listing_pro_action span:nth-child(3) a { background: #fdecea !important; color: #e53935 !important; border: 1px solid #ffcdd2 !important; }

/* ════ MESSAGES & LEADS ════ */
#my_message_details,
#my_lead_details {
    background: #fff !important;
    border-radius: var(--radius) !important;
    box-shadow: 0 1px 6px var(--shadow) !important;
    margin-bottom: 12px !important;
    overflow: hidden !important;
}
#my_message_img img {
    width: 70px !important; height: 70px !important;
    object-fit: cover !important; border-radius: var(--radius-sm) !important;
    border: 1.5px solid var(--blue-border) !important;
}
#my_message_product_name h3,
#my_lead_product_name h3 {
    font-size: 13.5px !important; font-weight: 700 !important;
    color: var(--text) !important; margin: 0 0 4px !important; line-height: 1.4 !important;
}
#my_message_product_name span,
#my_lead_product_name span { font-size: 11.5px !important; color: var(--sub) !important; }
#my_message_pro_action span a,
#my_lead_pro_action span a {
    display: inline-flex !important; align-items: center !important; gap: 5px !important;
    padding: 7px 14px !important; border-radius: 18px !important;
    font-size: 12px !important; font-weight: 600 !important; text-decoration: none !important;
    background: linear-gradient(135deg, #1565c0, #0d47a1) !important;
    color: #fff !important; box-shadow: 0 2px 6px var(--shadow) !important;
    margin-bottom: 6px !important;
}

/* ════ FORMS ════ */
input[type="text"], input[type="email"], input[type="number"],
input[type="tel"], input[type="password"], input[type="url"],
select, textarea {
    width: 100% !important;
    padding: 11px 13px !important;
    border: 1.5px solid var(--blue-border) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 14px !important;
    color: var(--text) !important;
    background: #fff !important;
    outline: none !important;
    -webkit-appearance: none !important;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--blue) !important;
    box-shadow: 0 0 0 3px rgba(21,101,192,0.12) !important;
}
textarea { min-height: 90px !important; resize: vertical !important; }
input[type="submit"], button[type="submit"] {
    width: 100% !important;
    padding: 13px !important;
    background: linear-gradient(135deg, #1565c0, #0d47a1) !important;
    color: #fff !important;
    border: none !important; border-radius: var(--radius-sm) !important;
    font-size: 15px !important; font-weight: 700 !important;
    cursor: pointer !important; margin-top: 16px !important;
}

/* ════ MODALS (full-screen iframe — fixes blank modal) ════ */
.modal {
    display: none;
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    overflow: auto !important;
    background: #fff !important;
    z-index: 2000 !important;
    padding-top: 0 !important;
}
.modal_content, #modal_cont {
    position: relative !important;
    background: #fff !important;
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
.detail_close {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 52px !important;
    padding: 0 16px !important;
    background: linear-gradient(135deg, #0d47a1, #1565c0) !important;
    box-shadow: 0 2px 8px rgba(13,71,161,0.25) !important;
}
.close_butten {
    position: static !important;
    width: 34px !important; height: 34px !important;
    margin-left: auto !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.18) !important;
    color: #fff !important;
    font-size: 22px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}
.close_butten:hover, .close_butten:focus { background: rgba(255,255,255,0.30) !important; color: #fff !important; }

/* tab wrapper / content must fill the modal so iframe gets real height */
.tab_wrapper {
    position: relative !important;
    width: 100% !important;
    height: calc(100% - 52px) !important;
    display: block !important;
    background: #fff !important;
}
.tab { height: 100% !important; }
.tab_content {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 1 !important;
    display: block !important;
    padding: 0 !important;
}
.tab label {
    display: none !important;   /* hide radio tab label — single tab only */
}
.iframe_reply, .my_speci {
    width: 100% !important;
    height: 100% !important;
    min-height: 70vh !important;
    border: none !important;
    display: block !important;
    background: #fff !important;
}

/* ════ OLD HEADER ELEMENTS — HIDE ════ */
#listing_form_header,
.free_listing_top_bar,
.account_top_bar,
#listing_top_bar,
.my_account_header,
#my_profile_top_bar,
.my_lead_top_bar,
.messages_top_bar,
.payment_top_bar {
    display: none !important;
}

/* ════ GLOBAL LINK COLOR ════ */
a { color: var(--blue) !important; }
a:hover { color: var(--blue-dark) !important; text-decoration: none; }

/* ════ BOTTOM NAV (mobile) ════ */
.sel-bottom-nav {
    display: flex;
    position: fixed; bottom: 0; left: 0; right: 0;
    background: #fff;
    border-top: 1px solid var(--border);
    z-index: 900;
    box-shadow: 0 -2px 10px rgba(13,71,161,0.10);
}
.sel-bottom-nav a {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 8px 4px 10px;
    font-size: 10px; color: var(--sub) !important; text-decoration: none !important;
    gap: 3px;
}
.sel-bottom-nav a i { font-size: 19px; }
.sel-bottom-nav a.active,
.sel-bottom-nav a:hover { color: var(--blue) !important; }

/* ════ RESPONSIVE ════ */
@media (min-width: 600px) {
    #account_deshboard_wrap { padding: 16px 20px 80px !important; }
    .sel-hdr { padding: 0 20px; }
}
@media (min-width: 768px) {
    .sel-bottom-nav { display: none; }
    #account_deshboard_wrap { max-width: 860px !important; margin: 0 auto !important; }
}
@media (min-width: 1024px) {
    #account_deshboard_wrap { max-width: 1000px !important; }
}

/* ════════════════════════════════════════════
   FIX: OLD PURPLE DASHBOARD LEFTOVERS
   (account_deshboard.css ke purane purple
    elements ko blue/hide karna)
   ════════════════════════════════════════════ */

/* Purani dashboard ke purple banner / category boxes hide
   (naya dashboard .sa_* classes use karta hai) */
#account_deshboard_category,
#account_unit_lead,
#account_unit_name_lead,
#account_deshboard_cont > h1 {
    background: transparent !important;
}

/* Agar koi purple strip bachi ho — blue kar do */
#account_deshboard_cont h1 a {
    background: linear-gradient(135deg, #1565c0, #0d47a1) !important;
    color: #fff !important;
}
#account_unit_lead span,
#account_deshboard_category span[style*="800080"] {
    background: #1565c0 !important;
}

/* Naye dashboard banner ko header ke saath proper connect karo
   (purple gap / strip remove) */
.sa_page { margin-top: 0 !important; }
.sa_banner { margin-top: 0 !important; }

/* Reply button clipping fix — text poora dikhe */
.sa_reply_btn {
    min-width: auto !important;
    overflow: visible !important;
    white-space: nowrap !important;
    padding: 9px 20px !important;
}
.sa_card_foot { overflow: visible !important; }

/* Koi bhi bacha hua purple background → blue */
[style*="background:#800080"],
[style*="background: #800080"],
[style*="background-color:#800080"],
[style*="background-color: #800080"],
[style*="background:#8b008b"],
[style*="background: #8b008b"],
[style*="background:#BA55D3"],
[style*="background: #BA55D3"] {
    background: #1565c0 !important;
}

/* ════════════════════════════════════════════
   FIX v2: PURPLE PATTI + REPLY BUTTON TEXT
   ════════════════════════════════════════════ */

/* (1) PURPLE STRIP — #contentwrap_header me purana
       background:#800080 tha. Use poori tarah hatao. */
#contentwrap_header {
    display: none !important;
    background: transparent !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* Koi bhi purana purple wrap/header element bhi neutralize */
#contentwrap_all,
#logo_header,
#header_logo_menu {
    background: transparent !important;
}

/* (2) REPLY BUTTON — text faint/clipped dikh raha tha.
       Gradient ke upar text + icon ko pure white aur
       z-index/opacity fix. */
.sa_reply_btn,
.sa_reply_btn:link,
.sa_reply_btn:visited {
    background: linear-gradient(135deg, #1565c0, #0d47a1) !important;
    color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: none !important;
    position: relative !important;
    z-index: 1 !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 700 !important;
}
.sa_reply_btn i,
.sa_reply_btn span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
}
/* active state pe halka dabav, but text white hi rahe */
.sa_reply_btn:active {
    opacity: 0.9 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}