/**
 * ECOSMART MARKETPLACE — main.css
 * Estilos base, componentes compartidos y layout
 */

/* ── RESET & BASE ─────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { height:100%; scroll-behavior:smooth; }
body { font-family:var(--font-body); background:var(--void); color:var(--txt-1); overflow-x:hidden; line-height:1.5; -webkit-font-smoothing:antialiased; }
a { text-decoration:none; color:inherit; }
button { font-family:var(--font-body); cursor:pointer; }
input, textarea, select { font-family:var(--font-body); }
img { max-width:100%; display:block; }

/* ── SCROLLBAR ────────────────────────────────────────────── */
::-webkit-scrollbar { width:3px; height:3px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--dark-5); border-radius:3px; }

/* ── LAYOUT WRAPPER ───────────────────────────────────────── */
.eco-page {
  max-width:var(--max-mobile);
  margin:0 auto;
  min-height:100vh;
  background:var(--dark-1);
  display:flex;
  flex-direction:column;
  position:relative;
  padding-bottom:calc(var(--nav-h) + 10px);
}
@media(min-width:900px) {
  .eco-page { max-width:none; flex-direction:row; }
  .eco-sidebar { display:flex !important; }
  .eco-bottom-nav { display:none !important; }
  .eco-main { flex:1; max-height:100vh; overflow-y:auto; }
}

/* ── SIDEBAR DESKTOP ──────────────────────────────────────── */
.eco-sidebar {
  display:none;
  width:var(--sidebar-w);
  min-height:100vh;
  background:var(--dark-2);
  border-right:1px solid var(--border-2);
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  flex-shrink:0;
}
.eco-sidebar-logo {
  padding:1.4rem 1.2rem 1rem;
  font-family:var(--font-display);
  font-size:1.3rem;
  font-weight:900;
  color:var(--txt-1);
  border-bottom:1px solid var(--border-2);
  letter-spacing:-.3px;
}
.eco-sidebar-logo em { color:var(--orange); font-style:italic; }
.eco-sidebar-nav { padding:.6rem; flex:1; }
.eco-sidebar-link {
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.72rem .9rem;
  border-radius:var(--r10);
  color:var(--txt-3);
  font-size:.875rem;
  font-weight:500;
  cursor:pointer;
  transition:var(--tr-base);
  margin-bottom:.2rem;
  border:none;
  background:none;
  width:100%;
  text-align:left;
}
.eco-sidebar-link i { width:18px; text-align:center; font-size:.9rem; }
.eco-sidebar-link:hover { background:var(--dark-3); color:var(--txt-1); }
.eco-sidebar-link.active { background:var(--orange-10); color:var(--orange); }
.eco-sidebar-link .link-count {
  margin-left:auto;
  background:var(--danger);
  color:white;
  font-size:.6rem;
  font-weight:800;
  padding:.15rem .45rem;
  border-radius:var(--r99);
  min-width:18px;
  text-align:center;
}
.eco-sidebar-footer {
  padding:.8rem;
  border-top:1px solid var(--border-2);
}

/* ── HEADER ───────────────────────────────────────────────── */
.eco-header {
  height:var(--header-h);
  padding:0 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--dark-2);
  border-bottom:1px solid var(--border-2);
  position:sticky;
  top:0;
  z-index:100;
  flex-shrink:0;
}
.eco-header-brand {
  font-family:var(--font-display);
  font-size:1.2rem;
  font-weight:900;
  color:var(--txt-1);
  letter-spacing:-.3px;
}
.eco-header-brand em { color:var(--orange); font-style:italic; }
.eco-header-center {
  font-size:.75rem;
  color:var(--txt-3);
  display:flex;
  align-items:center;
  gap:.3rem;
}
.eco-header-center i { color:var(--orange); font-size:.8rem; }
.eco-header-right { display:flex; align-items:center; gap:.5rem; }

/* ── BOTTOM NAV ───────────────────────────────────────────── */
.eco-bottom-nav {
  position:fixed;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:var(--max-mobile);
  height:var(--nav-h);
  background:var(--dark-2);
  border-top:1px solid var(--border-2);
  display:flex;
  justify-content:space-around;
  align-items:center;
  padding:0 .5rem;
  padding-bottom:env(safe-area-inset-bottom);
  z-index:100;
}
.eco-nav-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.2rem;
  font-size:.62rem;
  font-weight:600;
  color:var(--txt-4);
  cursor:pointer;
  padding:.35rem .7rem;
  border-radius:var(--r10);
  transition:var(--tr-base);
  letter-spacing:.2px;
  text-transform:uppercase;
  min-width:48px;
  border:none;
  background:none;
}
.eco-nav-item i { font-size:1.1rem; }
.eco-nav-item.active { color:var(--orange); }
.eco-nav-item.nav-cta {
  background:var(--orange);
  color:white;
  border-radius:var(--r12);
  padding:.4rem .9rem;
  margin-top:-10px;
}
.eco-nav-item.nav-cta.active,
.eco-nav-item.nav-cta:hover { background:var(--orange-light); color:white; }

/* ── BOTONES ──────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.85rem 1.2rem; border-radius:var(--r10); font-size:.9rem; font-weight:700; cursor:pointer; border:none; transition:var(--tr-base); white-space:nowrap; }
.btn-sm { padding:.55rem .9rem; font-size:.8rem; }
.btn-xs { padding:.35rem .7rem; font-size:.72rem; }
.btn-full { width:100%; }
.btn-icon { width:36px; height:36px; padding:0; border-radius:var(--r8); }

.btn-orange  { background:var(--orange); color:white; }
.btn-orange:hover  { background:var(--orange-light); }
.btn-orange:active { background:var(--orange-dark); transform:scale(.99); }

.btn-gold    { background:var(--gold); color:var(--void); }
.btn-gold:hover    { background:var(--gold-light); }

.btn-ghost   { background:var(--dark-3); color:var(--txt-2); border:1px solid var(--border-3); }
.btn-ghost:hover   { border-color:var(--orange); color:var(--orange); }

.btn-danger  { background:var(--danger-10); color:var(--danger); border:1px solid rgba(231,76,60,.2); }
.btn-danger:hover  { background:var(--danger-20); }

.btn-success { background:var(--success-10); color:var(--success); border:1px solid rgba(39,174,96,.2); }
.btn-success:hover { background:var(--success-20); }

.btn-dark    { background:var(--dark-3); color:var(--txt-2); border:1px solid var(--border-2); }
.btn-dark:hover    { border-color:var(--orange); color:var(--txt-1); }

/* ── INPUTS ───────────────────────────────────────────────── */
.eco-input {
  width:100%;
  padding:.85rem 1rem;
  background:var(--dark-3);
  border:1px solid var(--border-3);
  border-radius:var(--r10);
  color:var(--txt-1);
  font-size:.9rem;
  outline:none;
  transition:var(--tr-base);
}
.eco-input:focus { border-color:var(--orange); }
.eco-input::placeholder { color:var(--txt-5); }
.eco-input:disabled { opacity:.5; cursor:not-allowed; }

.eco-textarea {
  width:100%;
  padding:.85rem 1rem;
  background:var(--dark-3);
  border:1px solid var(--border-3);
  border-radius:var(--r10);
  color:var(--txt-1);
  font-size:.9rem;
  outline:none;
  transition:var(--tr-base);
  resize:vertical;
  min-height:90px;
  line-height:1.5;
}
.eco-textarea:focus { border-color:var(--orange); }
.eco-textarea::placeholder { color:var(--txt-5); }

.eco-select {
  width:100%;
  padding:.85rem 1rem;
  background:var(--dark-3);
  border:1px solid var(--border-3);
  border-radius:var(--r10);
  color:var(--txt-1);
  font-size:.9rem;
  outline:none;
  cursor:pointer;
  appearance:none;
}

.form-group { margin-bottom:1rem; }
.form-label {
  display:block;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--txt-3);
  margin-bottom:.45rem;
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }

/* ── CARDS ────────────────────────────────────────────────── */
.eco-card {
  background:var(--dark-2);
  border:1px solid var(--border-2);
  border-radius:var(--r16);
  overflow:hidden;
}
.eco-card-body { padding:1.1rem; }
.eco-card-hover { transition:var(--tr-base); cursor:pointer; }
.eco-card-hover:hover { border-color:var(--border-3); transform:translateY(-2px); box-shadow:var(--sh-md); }
.eco-card-hover:active { transform:scale(.98); }

/* ── BADGES / CHIPS ───────────────────────────────────────── */
.badge {
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  padding:.22rem .6rem;
  border-radius:var(--r6);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.2px;
}
.badge-orange { background:var(--orange-10); color:var(--orange); border:1px solid rgba(230,126,34,.2); }
.badge-gold   { background:var(--gold-10);   color:var(--gold);   border:1px solid var(--gold-border); }
.badge-green  { background:var(--success-10); color:var(--success); border:1px solid rgba(39,174,96,.2); }
.badge-red    { background:var(--danger-10); color:var(--danger); border:1px solid rgba(231,76,60,.2); }
.badge-blue   { background:var(--info-10);   color:var(--info);   border:1px solid rgba(41,128,185,.2); }
.badge-grey   { background:var(--dark-4);    color:var(--txt-3);  border:1px solid var(--border-2); }
.badge-warn   { background:var(--warning-10); color:var(--warning); border:1px solid rgba(243,156,18,.2); }

/* ── ICONOS CIRCULARES ────────────────────────────────────── */
.icon-circle {
  width:40px; height:40px;
  border-radius:var(--r10);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; flex-shrink:0;
}
.icon-sm { width:32px; height:32px; font-size:.85rem; }
.ic-orange { background:var(--orange-10); color:var(--orange); }
.ic-gold   { background:var(--gold-10);   color:var(--gold);   }
.ic-green  { background:var(--success-10); color:var(--success); }
.ic-red    { background:var(--danger-10); color:var(--danger); }
.ic-blue   { background:var(--info-10);   color:var(--info);   }
.ic-grey   { background:var(--dark-3);    color:var(--txt-3);  }

/* ── AVATAR ───────────────────────────────────────────────── */
.eco-avatar {
  width:36px; height:36px;
  border-radius:var(--r8);
  background:linear-gradient(135deg,var(--orange),var(--gold));
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.9rem; color:white;
  flex-shrink:0; cursor:pointer;
}
.eco-avatar-sm { width:28px; height:28px; font-size:.72rem; }
.eco-avatar-lg { width:80px; height:80px; font-size:2rem; border-radius:var(--r16); }

/* ── SECTION HEADER ───────────────────────────────────────── */
.sec-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.8rem 1rem .45rem;
}
.sec-head h2 {
  font-family:var(--font-display);
  font-size:1.1rem;
  font-weight:700;
  color:var(--txt-1);
}
.sec-head-action {
  font-size:.78rem;
  color:var(--orange);
  font-weight:600;
  background:none;
  border:none;
  cursor:pointer;
}

/* ── DIVIDERS ─────────────────────────────────────────────── */
.section-divider {
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:1px;
  font-weight:700;
  color:var(--txt-4);
  padding:.6rem 1rem .3rem;
}
.h-divider { border:none; border-top:1px solid var(--border-2); margin:.5rem 0; }
.or-divider {
  display:flex; align-items:center; gap:.8rem;
  color:var(--txt-5); font-size:.8rem;
}
.or-divider::before, .or-divider::after { content:''; flex:1; height:1px; background:var(--border-2); }

/* ── TOGGLE SWITCH ────────────────────────────────────────── */
.toggle {
  width:42px; height:24px;
  border-radius:12px;
  background:var(--dark-4);
  border:1px solid var(--border-3);
  cursor:pointer;
  position:relative;
  transition:var(--tr-base);
  flex-shrink:0;
}
.toggle.on { background:var(--orange); border-color:var(--orange); }
.toggle::after {
  content:'';
  position:absolute;
  top:2px; left:2px;
  width:18px; height:18px;
  border-radius:50%;
  background:white;
  transition:var(--tr-base);
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.toggle.on::after { left:calc(100% - 20px); }

/* ── STATUS CHIPS ─────────────────────────────────────────── */
.status-chip { display:inline-flex; align-items:center; gap:.35rem; }
.s-pendiente  { background:rgba(243,156,18,.1);  color:#f39c12;  }
.s-pagado     { background:var(--success-10);     color:var(--success); }
.s-preparando { background:var(--info-10);        color:var(--info); }
.s-enviado    { background:var(--orange-10);      color:var(--orange); }
.s-entregado  { background:var(--success-10);     color:var(--success); }
.s-cancelado  { background:var(--danger-10);      color:var(--danger); }
.s-activo     { background:var(--success-10);     color:var(--success); }
.s-inactivo   { background:var(--danger-10);      color:var(--danger); }

/* ── SKELETON / LOADING ───────────────────────────────────── */
.skeleton {
  background:linear-gradient(90deg,var(--dark-3) 25%,var(--dark-4) 50%,var(--dark-3) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:var(--r8);
}
@keyframes shimmer { from{background-position:200% 0} to{background-position:-200% 0} }

/* ── SPIN ─────────────────────────────────────────────────── */
.spin { animation:spin 1s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ── TOAST NOTIFICATION ───────────────────────────────────── */
#toast-container {
  position:fixed;
  top:20px;
  right:20px;
  z-index:99999;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  max-width:400px;
  width:calc(100% - 40px);
}
.toast-msg {
  background:linear-gradient(135deg,rgba(30,30,50,.96),rgba(38,38,62,.96));
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.08);
  color:#fff;
  padding:.85rem 1.4rem;
  border-radius:14px;
  font-size:.88rem;
  font-weight:600;
  display:flex; align-items:center; gap:.6rem;
  box-shadow:0 10px 40px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.04);
  animation:toastIn .35s cubic-bezier(.22,1,.36,1) forwards;
  border-left:4px solid var(--orange);
  min-width:220px;
  max-width:360px;
  pointer-events:auto;
  cursor:pointer;
  line-height:1.35;
}
.toast-msg i {
  font-size:1.1rem;
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px;
  flex-shrink:0;
}
.toast-msg.toast-success {
  border-left-color:#22c55e;
  background:linear-gradient(135deg,rgba(16,40,28,.96),rgba(20,50,35,.96));
}
.toast-msg.toast-success i { color:#22c55e; background:rgba(34,197,94,.12); }
.toast-msg.toast-error {
  border-left-color:#ef4444;
  background:linear-gradient(135deg,rgba(50,20,20,.96),rgba(60,25,25,.96));
}
.toast-msg.toast-error i { color:#ef4444; background:rgba(239,68,68,.12); }
.toast-msg.toast-warn {
  border-left-color:#f59e0b;
  background:linear-gradient(135deg,rgba(50,40,16,.96),rgba(55,45,20,.96));
}
.toast-msg.toast-warn i { color:#f59e0b; background:rgba(245,158,11,.12); }
.toast-msg.toast-info {
  border-left-color:#3b82f6;
  background:linear-gradient(135deg,rgba(18,28,52,.96),rgba(22,35,62,.96));
}
.toast-msg.toast-info i { color:#3b82f6; background:rgba(59,130,246,.12); }
@keyframes toastIn { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} }

/* ── MODALES ──────────────────────────────────────────────── */
.eco-modal-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(4px);
  z-index:500;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  animation:overlayIn .2s ease;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
@keyframes overlayIn { from{opacity:0} to{opacity:1} }
.eco-modal {
  background:var(--dark-2);
  border:1px solid var(--border-2);
  border-radius:var(--r24) var(--r24) 0 0;
  padding:1.5rem;
  padding-bottom:max(1.5rem,env(safe-area-inset-bottom));
  width:100%;
  max-width:var(--max-mobile);
  max-height:92vh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  animation:modalUp .35s var(--tr-slow);
}
.eco-modal-handle {
  width:36px; height:4px;
  background:var(--dark-5);
  border-radius:2px;
  margin:0 auto 1.2rem;
}
.eco-modal h3 {
  font-family:var(--font-display);
  font-size:1.25rem;
  font-weight:700;
  margin-bottom:.5rem;
}
@keyframes modalUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(230,126,34,.4)} 50%{box-shadow:0 0 0 10px rgba(230,126,34,0)} }
@media(min-width:900px) {
  .eco-modal-overlay { align-items:center; }
  .eco-modal { border-radius:var(--r24); max-width:500px; }
  .eco-modal-handle { display:none; }
}

/* ── ALERT CARDS ──────────────────────────────────────────── */
.alert-card {
  background:var(--dark-2);
  border:1px solid var(--border-2);
  border-left:3px solid var(--border-2);
  border-radius:0 var(--r10) var(--r10) 0;
  padding:.85rem;
  margin-bottom:.5rem;
  display:flex; gap:.8rem;
}
.alert-card.alert-danger { border-left-color:var(--danger); background:rgba(231,76,60,.04); }
.alert-card.alert-warn   { border-left-color:var(--gold);   background:rgba(201,151,28,.04); }
.alert-card.alert-info   { border-left-color:var(--info);   background:rgba(41,128,185,.04); }
.alert-card.alert-success{ border-left-color:var(--success); background:rgba(39,174,96,.04); }
.alert-icon { font-size:1rem; margin-top:.1rem; }
.alert-card.alert-danger .alert-icon { color:var(--danger); }
.alert-card.alert-warn   .alert-icon { color:var(--gold); }
.alert-card.alert-info   .alert-icon { color:var(--info); }
.alert-card.alert-success .alert-icon{ color:var(--success); }
.alert-text h5 { font-size:.83rem; font-weight:700; color:var(--txt-1); margin-bottom:.2rem; }
.alert-text p  { font-size:.75rem; color:var(--txt-3); line-height:1.4; }
.alert-time    { font-size:.68rem; color:var(--txt-4); margin-top:.3rem; }

/* ── BAR CHART ────────────────────────────────────────────── */
.bar-chart {
  display:flex;
  align-items:flex-end;
  gap:6px;
  height:110px;
}
.bar-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; }
.bar-col .bar-val { font-size:.6rem; color:var(--txt-4); }
.bar-col .bar-body {
  width:100%; border-radius:var(--r4) var(--r4) 0 0;
  background:var(--dark-4);
  border:1px solid var(--border-2);
  transition:height .6s ease;
  position:relative;
}
.bar-col .bar-body.highlight { background:linear-gradient(180deg,var(--orange-light),var(--orange)); border-color:transparent; }
.bar-col .bar-body:hover { opacity:.8; }
.bar-col .bar-label { font-size:.6rem; color:var(--txt-4); }

/* ── TABLE ────────────────────────────────────────────────── */
.eco-table-wrap { overflow-x:auto; overflow-y:auto; max-height:70vh; -webkit-overflow-scrolling:touch; }
.eco-table {
  width:100%;
  border-collapse:collapse;
  font-size:.83rem;
  min-width:400px;
}
.eco-table th {
  text-align:left;
  padding:.7rem .9rem;
  font-size:.68rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--txt-4);
  border-bottom:1px solid var(--border-2);
  white-space:nowrap;
}
.eco-table td {
  padding:.75rem .9rem;
  border-bottom:1px solid var(--border-1);
  color:var(--txt-2);
}
.eco-table tbody tr:hover { background:rgba(255,255,255,.02); }

/* ── EMPTY STATE ──────────────────────────────────────────── */
.empty-state {
  text-align:center;
  padding:3rem 1.5rem;
}
.empty-state .empty-icon { font-size:3.5rem; margin-bottom:1rem; }
.empty-state h3 { font-size:1rem; font-weight:700; color:var(--txt-2); margin-bottom:.4rem; }
.empty-state p  { font-size:.85rem; color:var(--txt-3); }

/* ── WALLET STRIP ─────────────────────────────────────────── */
.wallet-strip {
  margin:.4rem .8rem .7rem;
  background:var(--dark-3);
  border:1px solid var(--border-2);
  border-radius:var(--r14);
  padding:1rem 1.1rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:relative;
  overflow:hidden;
}
.wallet-strip::before {
  content:'';
  position:absolute;
  top:-20px; right:-20px;
  width:90px; height:90px;
  border-radius:50%;
  background:radial-gradient(circle,var(--orange-15),transparent);
}
.wallet-label { font-size:.65rem; text-transform:uppercase; letter-spacing:.5px; color:var(--txt-3); font-weight:600; }
.wallet-amount {
  font-family:var(--font-display);
  font-size:1.6rem; font-weight:700;
  color:var(--txt-1); line-height:1;
  margin:.1rem 0;
}
.wallet-reserved { font-size:.72rem; color:var(--txt-4); }
.wallet-reserved span { color:var(--gold); }
.wallet-actions { display:flex; flex-direction:column; gap:.4rem; }
.wallet-btn { padding:.45rem .9rem; border-radius:var(--r8); font-size:.78rem; font-weight:700; cursor:pointer; border:none; transition:var(--tr-base); }
.wallet-btn-primary { background:var(--orange); color:white; }
.wallet-btn-primary:hover { background:var(--orange-light); }
.wallet-btn-secondary { background:var(--dark-5); color:var(--txt-2); border:1px solid var(--border-3); }
.wallet-btn-secondary:hover { color:var(--txt-1); border-color:var(--orange); }

/* ── UTILITY CLASSES ──────────────────────────────────────── */
.text-orange { color:var(--orange); }
.text-gold   { color:var(--gold); }
.text-muted  { color:var(--txt-3); }
.text-danger { color:var(--danger); }
.text-success{ color:var(--success); }
.font-display{ font-family:var(--font-display); }
.font-bold   { font-weight:700; }
.font-heavy  { font-weight:900; }
.text-sm     { font-size:.83rem; }
.text-xs     { font-size:.72rem; }
.text-center { text-align:center; }

.d-flex      { display:flex; }
.align-center{ align-items:center; }
.justify-between { justify-content:space-between; }
.gap-4       { gap:1rem; }
.gap-3       { gap:.75rem; }
.gap-2       { gap:.5rem; }

.p-4         { padding:1rem; }
.p-3         { padding:.75rem; }
.mt-2        { margin-top:.5rem; }
.mt-4        { margin-top:1rem; }
.mb-4        { margin-bottom:1rem; }

.pb-nav      { padding-bottom:calc(var(--nav-h) + 10px); }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }