/* ── BASE ───────────────────────────────────────────────────── */
.mobile-only-link{display:none}
.barss{color:#000;font-size:2em;cursor:pointer;position:relative;transition:.5s linear;display:none;margin-right:15px}
.barss.rotate{rotate:180deg}
.logoo{float:left;margin-left:0!important;line-height:50px;display:flex}
.logoo span{color:#000;font-size:150%;line-height:50px}
#logo3{display:none}
.suspend{color:#fff;position:absolute;width:15px;height:15px;top:3px;left:10px;line-height:15px;background-color:red;border-radius:50%;text-align:center;font-size:.625em;font-weight:600}
h5{font-size:13px}
header a,#navbarr li a,.p-user a{text-decoration:none!important;color:#000}
.drap-two{position:relative;padding-bottom:5px;margin-bottom:-15px}
.manu-two{display:none;position:absolute;top:100%;right:0;background:#fff;min-width:280px;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,0.15);padding:0;margin-top:0;z-index:1000;opacity:0;transform:translateY(10px);transition:all .3s ease;text-align:left;line-height:normal;border:none;height:auto;overflow:visible}
.drap-two:hover>.manu-two{display:block;opacity:1;transform:translateY(0)}
.user-info-header{padding:18px 15px;background:linear-gradient(135deg,#ffbf00 0%,#ff9500 100%);border-radius:12px 12px 0 0;color:#fff}
.user-info-header strong{display:block;font-size:16px;font-weight:700;margin-bottom:2px;letter-spacing:0.5px}
.user-info-header small{font-size:12px;opacity:.95;font-weight:400}
.dropdown-divider{margin:5px 0;border:0;border-top:1px solid #eee}
.p-user{margin:0;transition:all .2s}
.p-user:hover{background:rgba(255,191,0,.08)}
.p-user a{display:flex!important;align-items:center;padding:14px 18px!important;font-size:14px;color:#333!important;line-height:1.2!important;font-family:'Josefin Sans',sans-serif;font-weight:500}
.p-user a i{width:22px;margin-right:12px;color:#FF5800;font-size:16px;text-align:center}
.p-user.seller-area a{font-weight:700;color:#FF5800!important}
.span{display:inline-block;margin-left:5px;transition:.3s}
.drap-two:hover .span{transform:rotate(-180deg)}

/* ── #result autocomplete ───────────────────────────────────── */
.wrap{position: relative;width:100%;}
#result {
    position: absolute;
    top: 100%; /* Sits exactly below the search pill */
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    z-index: 999; /* Below the main dropdowns (1000) but above page content */
    max-height: 400px;
    overflow-y: auto;
    margin-top: 2px; /* Small gap from the pill */
}

.history-title {
    padding: 10px 15px;
    font-size: 11px;
    text-transform: uppercase;
    color: #999;
    letter-spacing: 1px;
    background: #fdfdfd;
    font-weight: bold;
}

.history-row {
    background: #fff;
    border-bottom: 1px solid #f9f9f9;
}

.history-row i {
    color: #ccc;
    margin-right: 12px;
    font-size: 14px;
    width: 20px;
    text-align: center;
}

.history-row:hover {
    background: #fff8f5; /* Light Rikeys Orange tint */
}

.history-row span {
    color: #555;
    font-weight: 500;
}

/* ── BELL: mobile version inside #logo1 ─────────────────────── */
.notif-mobile{
  display:none; /* hidden by default; shown only on mobile */
  position:relative;
  margin-left:auto; /* pushes bell to the right of logo1 */
  margin-right:10px;
  color:#333;
  font-size:18px;
  text-decoration:none;
  align-items:center;
  justify-content:center;
  width:36px;
  height:50px;
}
/* Badge on mobile bell — same exact style as .suspend */
.notif-suspend{
  color:#fff;
  position:absolute;
  width:15px;height:15px;
  top:2px;right:-1px;
  line-height:15px;
  background-color:red;
  border-radius:50%;
  text-align:center;
  font-size:.625em;
  font-weight:600;
  display:none;
}

.suspend2{
  color:#fff;
  position:absolute;
  width:15px;height:15px;
  top:12px;right:12px;
  line-height:15px;
  background-color:red;
  border-radius:50%;
  text-align:center;
  font-size:.625em;
  font-weight:600;
}

/* ── BELL: desktop navbarr list item ────────────────────────── */
.notif-desktop-li{display:none;} /* hidden on mobile, shown on desktop */
/* Badge on desktop bell re-uses .suspend but needs tweaked position */
.notif-suspend-desk{top:12px;left:auto;right:12px;}

/* ── DESKTOP ────────────────────────────────────────────────── */
@media(min-width:951px){
  .barss{display:none}
  header{display:flex;align-items:center;height:60px;width:100%;padding:20px 2px;}
  #logo1{display:flex;align-items:center;flex-shrink:0;padding-left:12px;}
  .logoo{float:none;line-height:normal;}
  .logoo span{line-height:normal;}
  #logo2{flex:1;display:flex;align-items:center;justify-content:center;padding:0 16px;min-width:0;margin-left:30px;}
  #logo2 .logoo{float:none;line-height:normal;width:100%;}
  #logo2 .logoo .search{width:100%;}
  #navbarr{float:none;display:flex;align-items:center;flex-shrink:0;margin-right:10px;font-size:14px;}
  #navbarr>li{list-style:none;display:inline-flex;align-items:center;line-height:54px;}
  #navbarr>li:hover{background:#f5f5f5;}
  .top-search{display:flex;align-items:center;width:100%;max-width:560px;margin:0;padding:0;}
  #search.search{display:flex;align-items:center;width:100%;height:40px;border:2px solid #e0e0e0;border-radius:50px;overflow:hidden;background:#f7f7f7;transition:border-color .25s,box-shadow .25s,background .25s;}
  #search.search:focus-within{border-color:#FF5800;background:#fff;box-shadow:0 0 0 4px rgba(255,88,0,0.1);}
  #textbox{flex:1;height:100%;border:none;background:transparent;padding:0 14px;font-size:13.5px;color:#222;outline:none;min-width:0;float:none;width:auto;margin-top:0;border-color:transparent;}
  #textbox::placeholder{color:#aaa;}
  .clearbtn{display:none;align-items:center;justify-content:center;height:100%;padding:0 8px;background:transparent;border:none;color:#bbb;font-size:15px;cursor:pointer;flex-shrink:0;transition:color .2s;}
  .clearbtn:hover{color:#FF5800;}
  .butsearch{height:100%;padding:0 18px;background:linear-gradient(135deg,#FF5800,#ff7a00);border:none;color:#fff;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;flex-shrink:0;border-radius:0;float:none;width:auto;margin-top:0;transition:background .2s;}
  .butsearch:hover{background:linear-gradient(135deg,#e04e00,#ff6600);}
  .butsearch i{font-size:13px;}
  .search-text{display:inline;}
  /* Show desktop bell li, hide mobile bell */
  .notif-desktop-li{display:inline-flex;}
  .notif-mobile{display:none!important;}
}

/* ── TABLET ─────────────────────────────────────────────────── */
@media(min-width:601px) and (max-width:950px){
  .top-search{display:flex;align-items:center;width:100%;margin:0;padding:0;}
  #search.search{display:flex;align-items:center;width:100%;height:38px;border:2px solid #e0e0e0;border-radius:50px;overflow:hidden;background:#f7f7f7;transition:border-color .25s,box-shadow .25s,background .25s;}
  #search.search:focus-within{border-color:#FF5800;background:#fff;box-shadow:0 0 0 4px rgba(255,88,0,0.1);}
  #textbox{flex:1;height:100%;border:none;background:transparent;padding:0 10px;font-size:13px;color:#222;outline:none;min-width:0;float:none;width:auto;margin-top:0;}
  #textbox::placeholder{color:#aaa;}
  .clearbtn{display:none;align-items:center;justify-content:center;height:100%;padding:0 8px;background:transparent;border:none;color:#bbb;font-size:15px;cursor:pointer;flex-shrink:0;transition:color .2s;}
  .clearbtn:hover{color:#FF5800;}
  .butsearch{height:100%;padding:0 14px;background:linear-gradient(135deg,#FF5800,#ff7a00);border:none;color:#fff;font-size:13px;cursor:pointer;display:flex;align-items:center;flex-shrink:0;border-radius:0;float:none;width:auto;margin-top:0;}
  .search-text{display:none;}
  .butsearch i{font-size:14px;}
}
/* ── MOBILE: max 600px ──────────────────────────────────────── */
@media(max-width:600px){
  /* Search bar drops below navbar as fixed full-width strip */
  #logo2{
    position:fixed;
    top:50px;
    left:0;
    width:100%;
    background:#fff;
    border-bottom:2px solid #FF5800;
    padding:7px 10px;
    z-index:999;
    box-shadow:0 3px 10px rgba(0,0,0,0.08);
    display:flex;
    align-items:center;
    overflow:visible;
    transition:transform .3s ease, opacity .3s ease;
    will-change:transform;
  }
  #logo2 .logoo{float:none;line-height:normal;width:100%;overflow:visible;}
  #logo2 .logoo .search{width:100%;overflow:visible;}
  #logo2 form{overflow:visible;}
  #logo2 form>div{overflow:visible;}
  .wrap{overflow:visible;}
  .top-search{display:flex;align-items:center;width:100%;margin:0;padding:0;}
  #search.search{
    display:flex;align-items:center;width:100%;height:42px;
    border:2px solid #e0e0e0;border-radius:10px;overflow:hidden;
    background:#f7f7f7;transition:border-color .25s,box-shadow .25s,background .25s;
  }
  #search.search:focus-within{border-color:#FF5800;background:#fff;box-shadow:0 0 0 4px rgba(255,88,0,0.1);}
  .butsearch2{display:none;}
  #textbox{
    flex:1;height:100%;border:none;background:transparent;padding:0 14px;
    font-size:15px;color:#222;outline:none;min-width:0;float:none;width:auto;margin-top:0;
  }
  #textbox::placeholder{color:#aaa;}
  .clearbtn{display:none;align-items:center;justify-content:center;height:100%;padding:0 8px;background:transparent;border:none;color:#bbb;font-size:15px;cursor:pointer;flex-shrink:0;transition:color .2s;}
  .clearbtn:hover{color:#FF5800;}
  .butsearch{
    height:100%;padding:0 16px;
    background:linear-gradient(135deg,#FF5800,#ff7a00);
    border:none;color:#fff;font-size:16px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;border-radius:0 9px 9px 0;float:none;width:auto;margin-top:0;
  }
  .search-text{display:none;}
  .butsearch i{font-size:16px;}
  /* Bell */
  .notif-mobile{display:flex!important;}
  .notif-desktop-li{display:none!important;}
  #logo1{display:flex!important;align-items:center;width:100%;padding-right:0;}
}

/* ── MOBILE SIDEBAR ─────────────────────────────────────────── */
@media(max-width:950px){
  .mobile-only-link{display:block!important}
  .seller-link a i{color:#ffbf00!important}
  .barss{display:block;position:relative!important;top:unset!important;left:unset!important;transform:none!important;margin-right:15px}
  .logoo{margin-left:4px}
  #logo1{width:100%;display:flex!important;align-items:center;float:none;padding-left:10px}
  #navbarr{position:fixed;top:0;right:-100%;width:300px;height:100vh;background:#000!important;z-index:9999;transition:.4s cubic-bezier(0.4,0,0.2,1);box-shadow:-10px 0 30px rgba(0,0,0,0.5);display:block;padding:0;margin:0;overflow-y:auto}
  #navbarr.active{right:0}
  #navbarr li{display:block;width:100%;line-height:normal;border-bottom:1px solid #222;background:transparent!important}
  #navbarr li:hover{background:#111!important}
  #navbarr li a,#navbarr li a i{color:#fff!important}
  #navbarr li a{display:flex!important;align-items:center;padding:20px 20px!important;font-size:18px!important;font-weight:600}
  #navbarr li a i{width:40px;height:40px;background:#222;color:#FF5800!important;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-right:15px;font-size:20px}
  #navbarr .drap-two>a::after{content:'\f107';font-family:FontAwesome;margin-left:auto;font-size:20px;color:#666}
  .manu-two{position:static;width:100%;display:none;background:#111!important;box-shadow:none;opacity:1;transform:none;border-radius:0;margin:0;padding:15px 8px}
  .manu-two p,.manu-two h5,.manu-two #orders-content p,.my-orders-p{color:#fff!important}
  .user-info-header{background:transparent!important;border-bottom:1px solid #222;border-radius:0;padding:25px 20px;margin-bottom:10px}
  .user-info-header strong{font-size:20px;color:#fff!important}
  .p-user a{padding:15px 20px 15px 75px!important;font-weight:600;font-size:16px!important;color:#ccc!important}
  .order-buttons{display:flex;flex-direction:column;gap:10px;margin:10px 0}
  .order-btn{background:#222!important;border:1px solid #333!important;border-radius:8px!important;padding:12px!important;display:flex!important;justify-content:space-between;align-items:center;text-decoration:none!important;transition:background .2s}
  .order-btn:hover{background:#333!important}
  .order-no{color:#fff!important;font-weight:600;font-size:14px}
  .order-status{color:#ffbf00!important;font-size:12px;text-transform:uppercase;background:rgba(255,191,0,0.1);padding:2px 8px;border-radius:4px}
}