/* 
  this is the verbatim copy of the style.css of the core/style.css which is included by the index.php 
  this is repeated here so we can have a final ( core indpeendent and campaign specific overwrites 

  we will see how much overwrite power we have with this. 
  in order for this file to be included 

*/


:root{
  --mhkff-height: 90px;
  --mhkff-collapsed-height: 90px;
  --mhkff-handle-overlap: 12px;
  --mhkff-handle-maxw: 180px; /* JS may update */
}









/* Layout */
#mhkFixedFooter .mhkff-expand-zone{
  position:absolute; left:0; right:0; top:0;
  height: calc(var(--mhkff-height) - var(--mhkff-collapsed-height));
  overflow:hidden; background:black; /*canoot have transparent here*/
}
/* Expanded iframe fills the zone */
#mhkFixedFooter .mhkff-expand-zone iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block; background:transparent;
}

#mhkFixedFooter .mhkff-fixed-strip{
  position:absolute; left:0; right:0; bottom:0;
  height: var(--mhkff-collapsed-height); background:#fff;
  overflow:hidden;
}











/* Base */
#mhkFixedFooter, #mhkFixedFooter * { box-sizing: border-box; }

#mhkFixedFooter{
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 2147483647;
  height: var(--mhkff-height);
  border-top: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 -12px 30px rgba(0,0,0,.25);
  overflow: visible;
  will-change: height, transform;
  transition: height 360ms cubic-bezier(.22,.61,.36,1), transform 260ms ease;
  contain: layout paint;
  padding-bottom: env(safe-area-inset-bottom, 0);
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce){ #mhkFixedFooter{ transition: none; } }

/* Slide offscreen */
#mhkFixedFooter.is-offscreen{
  transform: translateY(calc(100% + env(safe-area-inset-bottom, 0)));
  pointer-events: none;
}

/* Handle (right-anchored) */
#mhkFixedFooter .mhkff-handle{
  position: absolute;
  right: 16px; left: auto; transform: none;
  top: calc(-1 * var(--mhkff-handle-overlap));
  padding-top: 9px;
  z-index: 3;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  border: 0;
  background: #dd1e1e; 
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: filter 150ms ease, opacity 150ms ease;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  max-width: var(--mhkff-handle-maxw);
}
#mhkFixedFooter .mhkff-handle:active{ filter: brightness(.95); }
#mhkFixedFooter .mhkff-icon{ width:20px; height:20px; transition: transform 250ms ease; } 
#mhkFixedFooter.is-expanded .mhkff-icon{ transform: rotate(180deg); }

/* Tab style */
.mhkff-handle.style-tab{
  padding: 0 12px; height: 36px; border-radius: 999px;
  background:#c20472; color:#fff;
  box-shadow: 0 8px 22px rgba(194,4,114,.25);
  font: 600 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.mhkff-handle.style-tab .mhkff-label{
  display:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
@media (min-width: 992px){
  .mhkff-handle.style-tab{ height:30px; }          /* your 30px desktop height */
  .mhkff-handle.style-tab .mhkff-label{ display:inline-block; }
}

/* Optional other styles preserved */
.mhkff-handle.style-notch{ width:44px; height:44px; border-radius:999px; background:rgba(0,0,0,.75); color:#fff; box-shadow:0 6px 16px rgba(0,0,0,.25); }
.mhkff-handle.style-grabber{ height:24px; padding:0 10px; border-radius:999px; background:rgba(0,0,0,.75); color:#fff; box-shadow:0 6px 16px rgba(0,0,0,.22); }
.mhkff-handle.style-grabber .mhkff-dots{ display:inline-block; width:24px; height:4px; border-radius:3px; background:#fff; opacity:.9; position:relative; }
.mhkff-handle.style-grabber .mhkff-dots::before,
.mhkff-handle.style-grabber .mhkff-dots::after{ content:""; position:absolute; top:0; width:24px; height:4px; border-radius:3px; background:#fff; opacity:.6; }
.mhkff-handle.style-grabber .mhkff-dots::before{ transform:translateY(-6px); }
.mhkff-handle.style-grabber .mhkff-dots::after{  transform:translateY(6px);  }
.mhkff-handle.style-square{ width:40px; height:40px; border-radius:10px; background:rgba(0,0,0,.75); color:#fff; box-shadow:0 6px 16px rgba(0,0,0,.22); }

#mhkFixedFooter .mhkff-fixed-strip iframe{
  display:block; width:100%; height:100%; border:0; 
  background: black; /* #FDD507; /*yellow aleem amr*/
}