/* ============================================================
   DASHBOARD LIGHT — modern light skin for logged-in users
   - Layered AFTER layout.css so it wins
   - No markup or class changes — purely visual
   - Mobile-first refinements + dedicated New Order tweaks
   ============================================================ */

:root{
  --d-brand:        #10D070;
  --d-brand-2:      #00B860;
  --d-brand-soft:   #E6FAF1;
  --d-brand-ring:   rgba(16,208,112,.18);
  --d-ink:          #0E1726;
  --d-text:         #1F2937;
  --d-muted:        #6B7280;
  --d-line:         #E5E7EB;
  --d-line-strong:  #D1D5DB;
  --d-bg:           #F6F8FB;
  --d-bg-2:         #FFFFFF;
  --d-elev:         0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
  --d-elev-strong:  0 6px 16px rgba(16,24,40,.08), 0 24px 48px rgba(16,24,40,.10);
  --d-radius:       14px;
  --d-radius-lg:    18px;
  --d-radius-pill:  999px;
  --d-font:         'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --d-font-display: 'Sora', 'Inter', system-ui, sans-serif;
}

/* ---------- base ---------- */
body{
  background: var(--d-bg) !important;
  color: var(--d-text) !important;
  font-family: var(--d-font) !important;
  -webkit-font-smoothing: antialiased;
}
a{ color: var(--d-text); }
a:hover{ color: var(--d-brand-2); }
.text-muted{ color: var(--d-muted) !important; }
hr{ border-top-color: var(--d-line) !important; }
h1,h2,h3,h4,h5,.card-title,.page-title{
  font-family: var(--d-font-display) !important;
  color: var(--d-ink) !important;
  letter-spacing: -.01em;
}

/* ---------- top header (dark gradient bar) ---------- */
.header.top{
  position: sticky; top: 0; z-index: 80;
  background: linear-gradient(135deg, #0E1A2E 0%, #122443 100%) !important;
  border-bottom: 0 !important;
  padding: 14px 0 !important;
  box-shadow: 0 1px 0 rgba(16,24,40,.04);
}
.header.top.scrolled{ box-shadow: 0 8px 24px rgba(16,24,40,.10); }
.header.top a, .header.top .text-white, .header.top .nav-link{ color: #fff !important; }
.header.top img[alt="Website logo"]{ max-height: 36px !important; }

.header.top .notifcation a{
  width: 40px; height: 40px;
  display: inline-grid; place-items: center;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff !important;
  transition: all .2s ease;
}
.header.top .notifcation a:hover{
  background: rgba(16,208,112,.18);
  border-color: rgba(16,208,112,.5);
}
.header.top .notifcation .nav-unread.change_color{
  background: #FFCB45 !important;
  box-shadow: 0 0 0 3px rgba(255,203,69,.25);
}

.avatar{
  background-size: cover !important; background-position: center !important;
  border-radius: 50% !important;
  width: 38px !important; height: 38px !important;
  box-shadow: 0 0 0 2px rgba(16,208,112,.45);
}

.header-toggler{
  width: 42px; height: 42px; border-radius: 12px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  display: inline-grid !important; place-items: center;
}
.header-toggler-icon{ width: 18px; height: 2px; background: #fff; display: block; position: relative; }
.header-toggler-icon::before, .header-toggler-icon::after{
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: #fff;
}
.header-toggler-icon::before{ top: -6px; }
.header-toggler-icon::after{ top: 6px; }

/* ---------- secondary nav (the white tab bar) ---------- */
.header.top + .header{
  background: #fff !important;
  border-bottom: 1px solid var(--d-line) !important;
  box-shadow: 0 1px 0 rgba(16,24,40,.02);
}
.nav-tabs{ background: transparent !important; border: 0 !important; padding: 4px 0; }
.nav-tabs .nav-link{
  color: var(--d-muted) !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  margin: 4px 4px !important;
  font-weight: 500 !important;
  font-size: 14px;
  transition: background .18s ease, color .18s ease;
}
.nav-tabs .nav-link i{ margin-right: 6px; opacity: .85; }
.nav-tabs .nav-link:hover{
  background: #F1F5F9 !important;
  color: var(--d-ink) !important;
}
.nav-tabs .nav-link.active{
  background: var(--d-brand-soft) !important;
  color: var(--d-brand-2) !important;
  box-shadow: inset 0 0 0 1px rgba(16,208,112,.25);
}

/* mobile drawer */
@media (max-width: 991.98px){
  #headerMenuCollapse{
    background: #fff !important;
    border-top: 1px solid var(--d-line) !important;
    padding: 8px 0 14px !important;
    box-shadow: 0 8px 24px rgba(16,24,40,.06);
  }
  #headerMenuCollapse .nav-tabs{
    flex-direction: column !important;
    padding: 6px 12px !important;
  }
  #headerMenuCollapse .nav-tabs .nav-link{ margin: 2px 0 !important; }
  #headerMenuCollapse .dropdown-menu{
    position: static !important;
    transform: none !important;
    box-shadow: none !important;
    border: 0 !important;
    background: #F8FAFC !important;
    margin: 4px 0 8px 12px !important;
  }
}

/* ---------- dropdowns ---------- */
.dropdown-menu{
  background: #fff !important;
  border: 1px solid var(--d-line) !important;
  border-radius: 14px !important;
  padding: 8px !important;
  box-shadow: var(--d-elev-strong) !important;
  color: var(--d-text);
}
.dropdown-item{
  color: var(--d-text) !important;
  border-radius: 10px !important;
  padding: 9px 12px !important;
  font-size: 14px;
  transition: background .15s ease, color .15s ease;
}
.dropdown-item:hover, .dropdown-item:focus{
  background: var(--d-brand-soft) !important;
  color: var(--d-brand-2) !important;
}
.dropdown-divider{ border-top-color: var(--d-line) !important; margin: 6px 0 !important; }
.dropdown-icon{ color: var(--d-brand-2) !important; }
.dropdown-menu-arrow::before{ border-bottom-color: #fff !important; }

/* ---------- cards ---------- */
.card{
  background: #fff !important;
  border: 1px solid var(--d-line) !important;
  border-radius: var(--d-radius-lg) !important;
  box-shadow: var(--d-elev) !important;
  color: var(--d-text) !important;
  overflow: hidden;
}
.card-header, .card-footer{
  background: #fff !important;
  border-color: var(--d-line) !important;
  color: var(--d-ink) !important;
  padding: 16px 20px !important;
}
.card-body{ padding: 20px !important; color: var(--d-text) !important; }
.card-title{ color: var(--d-ink) !important; font-weight: 700; }
.card .card-status{
  background: linear-gradient(90deg, var(--d-brand), var(--d-brand-2)) !important;
}
.bg-blue, .bg-azure, .bg-info, .bg-primary{ background: linear-gradient(135deg,#0EA5E9,#60A5FA) !important; color:#fff !important; }
.bg-green, .bg-success{ background: linear-gradient(135deg,var(--d-brand),var(--d-brand-2)) !important; color:#fff !important; }
.bg-yellow, .bg-warning{ background: linear-gradient(135deg,#F59E0B,#FBBF24) !important; color:#fff !important; }
.bg-red, .bg-danger{ background: linear-gradient(135deg,#EF4444,#F87171) !important; color:#fff !important; }
.bg-purple, .bg-violet{ background: linear-gradient(135deg,#8B5CF6,#A78BFA) !important; color:#fff !important; }

/* statistics tiles get a soft icon halo */
.card .stat-tile, .statistics-info{ border-radius: var(--d-radius-lg) !important; }

/* ---------- buttons ---------- */
.btn{
  border-radius: 10px !important;
  font-weight: 600 !important;
  border-width: 1px !important;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary, .btn-success{
  background: linear-gradient(135deg, var(--d-brand), var(--d-brand-2)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 6px 18px -8px rgba(16,208,112,.55);
}
.btn-primary:hover, .btn-success:hover{
  color: #fff !important;
  box-shadow: 0 12px 26px -10px rgba(16,208,112,.6);
}
.btn-outline-primary, .btn-outline-success{
  background: #fff !important;
  border-color: var(--d-brand) !important;
  color: var(--d-brand-2) !important;
}
.btn-outline-primary:hover, .btn-outline-success:hover{
  background: var(--d-brand) !important;
  border-color: var(--d-brand) !important;
  color: #fff !important;
}
.btn-secondary{
  background: #fff !important;
  border-color: var(--d-line-strong) !important;
  color: var(--d-text) !important;
}
.btn-secondary:hover{ background: #F1F5F9 !important; color: var(--d-ink) !important; }
.btn-danger{ background: linear-gradient(135deg,#EF4444,#F87171) !important; border-color: transparent !important; color: #fff !important; }
.btn-info{ background: linear-gradient(135deg,#0EA5E9,#60A5FA) !important; border-color: transparent !important; color: #fff !important; }
.btn-link{ color: var(--d-brand-2) !important; }
.btn-pill, .btn.round{ border-radius: var(--d-radius-pill) !important; }
.btn-icon{ padding: 8px 10px !important; }

/* ---------- forms ---------- */
.form-control, select.form-control, textarea.form-control,
.selectize-input, .input-group-text{
  background: #fff !important;
  border: 1px solid var(--d-line-strong) !important;
  color: var(--d-text) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
  min-height: 42px;
}
.form-control::placeholder{ color: #9CA3AF !important; }
.form-control:focus, select.form-control:focus, textarea.form-control:focus,
.selectize-input.focus, .selectize-input.input-active{
  border-color: var(--d-brand) !important;
  box-shadow: 0 0 0 4px var(--d-brand-ring) !important;
  outline: 0 !important;
}
.input-group > .form-control:first-child,
.input-group > .input-group-prepend > .input-group-text{
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.input-group > .form-control:last-child,
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-append > .btn{
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
label, .form-label{
  color: var(--d-ink) !important;
  font-weight: 500;
  font-size: 13px;
  margin-bottom: 6px;
}
textarea.form-control{ min-height: 110px; }
.form-group{ margin-bottom: 16px; }

/* selectize dropdown */
.selectize-dropdown{
  background: #fff !important;
  border: 1px solid var(--d-line-strong) !important;
  color: var(--d-text) !important;
  border-radius: 12px !important;
  box-shadow: var(--d-elev-strong) !important;
}
.selectize-dropdown .active{
  background: var(--d-brand-soft) !important;
  color: var(--d-brand-2) !important;
}
.selectize-input > .item{ color: var(--d-text) !important; }

/* custom switches & checkboxes */
.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
.custom-switch-input:checked ~ .custom-switch-indicator{
  background: var(--d-brand) !important;
  border-color: var(--d-brand) !important;
}
.custom-control-label::before{
  border-color: var(--d-line-strong) !important;
}

/* ---------- tables ---------- */
.table{
  color: var(--d-text) !important;
  border-color: var(--d-line) !important;
  background: transparent !important;
}
.table thead th{
  background: #F8FAFC !important;
  color: var(--d-muted) !important;
  border-bottom: 1px solid var(--d-line) !important;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .04em;
}
.table td, .table th{
  border-top-color: var(--d-line) !important;
  vertical-align: middle;
  padding: 12px 14px !important;
}
.table-hover tbody tr:hover{ background: #F8FAFC !important; }
.table-striped tbody tr:nth-of-type(odd){ background: #FAFBFC !important; }
.table-responsive{ border-radius: var(--d-radius); }

/* ---------- badges & alerts ---------- */
.badge{
  border-radius: var(--d-radius-pill) !important;
  font-weight: 600;
  padding: 5px 10px;
}
.badge-info{ background: #DBEAFE !important; color: #1D4ED8 !important; }
.badge-success{ background: var(--d-brand-soft) !important; color: var(--d-brand-2) !important; }
.badge-warning{ background: #FEF3C7 !important; color: #92400E !important; }
.badge-danger{ background: #FEE2E2 !important; color: #B91C1C !important; }
.badge-secondary{ background: #F1F5F9 !important; color: var(--d-muted) !important; }

.alert{
  border-radius: var(--d-radius) !important;
  border: 1px solid var(--d-line) !important;
  background: #fff !important;
  color: var(--d-text) !important;
}
.alert-success{ background: var(--d-brand-soft) !important; border-color: rgba(16,208,112,.3) !important; color: #065F46 !important; }
.alert-danger{ background: #FEF2F2 !important; border-color: #FECACA !important; color: #991B1B !important; }
.alert-info{ background: #EFF6FF !important; border-color: #BFDBFE !important; color: #1E40AF !important; }
.alert-warning{ background: #FFFBEB !important; border-color: #FDE68A !important; color: #92400E !important; }

/* ---------- modals (preserves the right-side drawer layout) ---------- */
.modal{ -webkit-overflow-scrolling: touch; }
.modal-content{
  background: #fff !important;
  border: 1px solid var(--d-line) !important;
  border-radius: var(--d-radius-lg) !important;
  color: var(--d-text) !important;
  box-shadow: var(--d-elev-strong) !important;
  display: flex !important;
  flex-direction: column;
  max-height: 100vh;
}
.modal-content > form{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.modal-header{
  flex: 0 0 auto;
  border-color: var(--d-line) !important;
  position: sticky; top: 0; z-index: 2;
  background: #fff;
  padding: 14px 20px !important;
}
.modal-header.bg-pantone{
  background: linear-gradient(135deg, var(--d-brand), var(--d-brand-2)) !important;
  color: #fff !important;
}
.modal-header.bg-pantone .modal-title,
.modal-header.bg-pantone h4{ color: #fff !important; }
.modal-footer{
  flex: 0 0 auto;
  border-color: var(--d-line) !important;
  position: sticky; bottom: 0; z-index: 2;
  background: #fff;
  padding: 12px 20px !important;
}
.modal-body{
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  min-height: 0;
  padding: 20px !important;
}
.modal-title, .modal-header h4, .modal-header h5{ color: var(--d-ink); }
.modal-header.bg-pantone .close{
  color: #fff !important;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.25);
}
.modal-header.bg-pantone .close:hover{
  background: rgba(255,255,255,.3);
  color: #fff !important;
}
.modal-header .close{
  color: var(--d-text) !important;
  opacity: .9;
  text-shadow: none !important;
  background: #fff;
  border: 1px solid var(--d-line-strong);
  border-radius: 10px;
  width: 36px; height: 36px;
  display: inline-flex !important;
  align-items: center; justify-content: center;
  padding: 0 !important;
  cursor: pointer;
}
.modal-header .close:hover{
  color: var(--d-brand-2) !important;
  border-color: var(--d-brand);
  opacity: 1;
}
.modal-header .close::before{ font-size: 18px; line-height: 1; }

/* right-side drawer keeps full height */
.modal-right .modal-dialog{ height: 100vh !important; max-height: 100vh; }
.modal-right .modal-content{ height: 100%; max-height: 100vh; border-radius: 0 !important; }

/* mobile: full-screen sheet for any modal */
@media (max-width: 575.98px){
  .modal-dialog,
  .modal-right .modal-dialog{
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
  }
  .modal-content{
    border-radius: 0 !important;
    height: 100vh;
    max-height: 100vh;
    border-left: 0 !important;
    border-right: 0 !important;
  }
  .modal-body{ padding: 14px !important; }
  .modal-header{ padding: 12px 14px !important; }
  .modal-footer{ padding: 10px 14px !important; }
}
body.modal-open{ overflow: hidden; }

/* ---------- pagination, breadcrumb, progress ---------- */
.pagination .page-link{
  background: #fff !important;
  border-color: var(--d-line) !important;
  color: var(--d-text) !important;
  border-radius: 10px !important;
  margin: 0 3px !important;
}
.pagination .page-item.active .page-link{
  background: var(--d-brand) !important;
  border-color: var(--d-brand) !important;
  color: #fff !important;
}
.pagination .page-item.disabled .page-link{ color: var(--d-muted) !important; }
.progress{ background: #EEF2F7 !important; border-radius: 999px !important; height: 8px !important; }
.progress-bar{ background: linear-gradient(90deg, var(--d-brand), var(--d-brand-2)) !important; }
.breadcrumb{ background: transparent !important; padding-left: 0; }
.breadcrumb-item, .breadcrumb-item a{ color: var(--d-muted) !important; }
.breadcrumb-item.active{ color: var(--d-ink) !important; }

/* ---------- toast (jquery-toast) ---------- */
.jq-toast-single{
  border-radius: 14px !important;
  background: #fff !important;
  border: 1px solid var(--d-line) !important;
  color: var(--d-text) !important;
  box-shadow: var(--d-elev-strong) !important;
}
.jq-icon-success{ border-left: 4px solid var(--d-brand) !important; }
.jq-icon-error{ border-left: 4px solid #EF4444 !important; }
.jq-icon-info{ border-left: 4px solid #0EA5E9 !important; }
.jq-icon-warning{ border-left: 4px solid #F59E0B !important; }

/* ---------- scrollbars ---------- */
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-track{ background: transparent; }
*::-webkit-scrollbar-thumb{ background: #D8DEE7; border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover{ background: var(--d-brand); }

/* ---------- search box ---------- */
.search-box .form-control{
  background: #F8FAFC !important;
  border-color: var(--d-line-strong) !important;
  color: var(--d-text) !important;
  min-height: 40px;
}
.search-box select.form-control{ border-radius: 10px 0 0 10px !important; }
.search-box .input-group .form-control{ border-radius: 0 !important; }
.search-box .input-group .btn{ border-radius: 0 10px 10px 0 !important; }

/* ---------- footer ---------- */
footer, .footer{
  background: #fff !important;
  border-top: 1px solid var(--d-line) !important;
  color: var(--d-muted) !important;
  margin-top: 32px;
  padding: 18px 0;
}
footer a, .footer a{ color: var(--d-muted) !important; }
footer a:hover, .footer a:hover{ color: var(--d-brand-2) !important; }

/* ---------- page overlay ---------- */
#page-overlay{ background: rgba(255,255,255,.92) !important; }
.lds-double-ring div{ border-color: var(--d-brand) transparent var(--d-brand) transparent !important; }

/* ---------- list-group ---------- */
.list-group-item{
  background: #fff !important;
  border-color: var(--d-line) !important;
  color: var(--d-text) !important;
}
.list-group-item.active{
  background: var(--d-brand-soft) !important;
  border-color: rgba(16,208,112,.35) !important;
  color: var(--d-brand-2) !important;
}

/* ============================================================
   NEW ORDER PAGE — mobile-first refinements
   ============================================================ */
#result_ajaxSearch .card{ border-radius: var(--d-radius-lg) !important; }

/* tabs row inside the card */
#result_ajaxSearch .card-header{
  padding: 8px 12px !important;
  background: #F8FAFC !important;
  border-bottom: 1px solid var(--d-line) !important;
}
#result_ajaxSearch .tabs-list .nav-tabs{ padding: 0; gap: 6px; }
#result_ajaxSearch .tabs-list .nav-tabs .nav-link{
  background: #fff !important;
  border: 1px solid var(--d-line) !important;
  margin: 4px 0 !important;
  padding: 9px 14px !important;
  border-radius: 999px !important;
  color: var(--d-muted) !important;
  font-weight: 600;
}
#result_ajaxSearch .tabs-list .nav-tabs .nav-link.active{
  background: linear-gradient(135deg, var(--d-brand), var(--d-brand-2)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 6px 18px -8px rgba(16,208,112,.55);
}

/* section titles inside the form */
#result_ajaxSearch .content-header-title h4,
#result_ajaxSearch .content-header-title h6{
  font-size: 1rem !important;
  margin: 0 0 14px !important;
  color: var(--d-ink) !important;
  display: inline-flex; align-items: center; gap: 8px;
}
#result_ajaxSearch .content-header-title h4 i,
#result_ajaxSearch .content-header-title h6 i{ color: var(--d-brand-2); }

/* the order resume side panel */
.order_resume{
  background: #F8FAFC;
  border-radius: var(--d-radius-lg);
  padding: 16px !important;
  border: 1px dashed var(--d-line);
}

/* total charge pill */
#result_total_charge .total_charge{
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--d-brand), var(--d-brand-2)) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  font-weight: 700;
  border: 0 !important;
  box-shadow: 0 6px 18px -8px rgba(16,208,112,.5);
}

/* the loud red Instagram notice — make readable & rounded (legacy fallback) */
#result_ajaxSearch [style*="background-color: red"]{
  background: linear-gradient(135deg, #DC2626, #EF4444) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  margin-bottom: 18px;
  box-shadow: 0 8px 22px -10px rgba(220,38,38,.4);
}
#result_ajaxSearch [style*="background-color: red"] h2{
  color: #fff !important;
  font-size: 1.05rem !important;
  margin-bottom: 8px;
}
#result_ajaxSearch [style*="background-color: red"] a.screenshot-link{
  color: #fff;
  text-decoration: underline;
}

/* ---------- Instagram update notice (new modern card) ---------- */
.ig-update-notice{
  position: relative;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: linear-gradient(135deg, #FFF7ED 0%, #FEF3F2 100%);
  border: 1px solid #FED7AA;
  border-left: 4px solid #F59E0B;
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 20px;
  color: #4B2E12;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.ig-update-notice__icon{
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(135deg,#F58529,#DD2A7B 50%,#8134AF 100%);
  color: #fff;
  font-size: 20px;
  box-shadow: 0 6px 16px -8px rgba(221,42,123,.55);
}
.ig-update-notice__body{ flex: 1 1 auto; min-width: 0; }
.ig-update-notice__head{
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-bottom: 6px;
}
.ig-update-notice__badge{
  display: inline-block;
  font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: #92400E;
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  padding: 3px 8px; border-radius: 999px;
}
.ig-update-notice__title{
  font-family: var(--d-font-display) !important;
  font-size: 1rem !important;
  font-weight: 700;
  color: #1F2937 !important;
  margin: 0 !important;
}
.ig-update-notice__lead{
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.55;
  color: #374151;
}
.ig-update-notice__steps{
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.ig-update-notice__steps li{
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid #FDE68A;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 14px;
  color: #374151;
}
.ig-update-notice__steps li span{
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg,#F59E0B,#FBBF24);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.ig-update-notice__foot{
  margin: 0 0 12px;
  font-size: 13.5px;
  color: #7C2D12;
  background: #FFFBEB;
  border: 1px dashed #FDE68A;
  border-radius: 10px;
  padding: 8px 12px;
}
.ig-update-notice__foot i{ margin-right: 6px; color: #B45309; }
.ig-update-notice__link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  color: #fff !important;
  background: linear-gradient(135deg,#F58529,#DD2A7B 60%,#8134AF);
  text-decoration: none !important;
  box-shadow: 0 6px 16px -8px rgba(221,42,123,.5);
  transition: transform .15s ease, box-shadow .2s ease;
}
.ig-update-notice__link:hover{
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -10px rgba(221,42,123,.55);
}

@media (max-width: 575.98px){
  .ig-update-notice{
    padding: 14px;
    gap: 10px;
    border-radius: 12px;
  }
  .ig-update-notice__icon{ width: 38px; height: 38px; font-size: 18px; }
  .ig-update-notice__title{ font-size: 0.95rem !important; }
  .ig-update-notice__lead, .ig-update-notice__steps li{ font-size: 13.5px; }
}

/* mobile: stack columns, single-column resume, sticky place-order CTA */
@media (max-width: 767.98px){
  #result_ajaxSearch .col-md-6{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  #result_ajaxSearch .order_resume{
    margin-top: 18px;
    padding: 14px !important;
  }
  #result_ajaxSearch .form-actions.left{
    position: sticky;
    bottom: 0;
    background: linear-gradient(0deg, #ffffff 75%, rgba(255,255,255,0));
    padding: 12px 0 8px;
    margin: 0 -4px;
    z-index: 5;
  }
  #result_ajaxSearch .form-actions.left .btn{
    width: 100% !important;
    padding: 14px 18px !important;
    font-size: 15px !important;
    margin: 0 !important;
  }
  /* readonly resume textareas can be tall on mobile — cap them */
  #result_ajaxSearch .order_resume textarea[readonly]{ min-height: 90px; max-height: 160px; }
  /* mass order textarea sizing */
  #editor{ min-height: 200px; }
}

/* ============================================================
   GENERAL MOBILE POLISH
   ============================================================ */
@media (max-width: 575.98px){
  .container{ padding-left: 14px !important; padding-right: 14px !important; }
  .my-3, .my-md-5{ margin-top: 14px !important; margin-bottom: 14px !important; }
  .card-body{ padding: 16px !important; }
  .card-header{ padding: 12px 14px !important; }
  .page-title{ font-size: 1.25rem !important; }
  .table-responsive{ margin: 0 -2px; }
  .btn{ padding: 10px 14px; }
  /* avoid logo + avatar squeeze on small screens */
  .header.top .d-flex{ align-items: center; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}