/* Host Packages widget */
.ffb-host-packages{
  direction: rtl;
  font-family: inherit;
}
.ffb-hp-toggle{
  display:flex;
  gap:10px;
  justify-content:center;
  margin: 0 0 18px;
}
.ffb-hp-toggle-btn{
  border:1px solid #e5e7eb;
  background:#fff;
  padding:10px 18px;
  border-radius:999px;
  cursor:pointer;
  font-weight:600;
  box-shadow:0 10px 30px rgba(0,0,0,.04);
  transition:transform .15s ease, box-shadow .15s ease;
}
.ffb-hp-toggle-btn:hover{ transform: translateY(-1px); box-shadow:0 14px 34px rgba(0,0,0,.06); }
.ffb-hp-toggle-btn.is-active{
  border-color:#cbd5e1;
}
.ffb-hp-tabs{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:14px;
  margin: 0 0 18px;
}
@media (max-width: 1024px){
  .ffb-hp-tabs{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .ffb-hp-tabs{ grid-template-columns: 1fr; }
}
.ffb-hp-tab{
  border:1px solid #eef2f7;
  background:#fff;
  border-radius:16px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
  box-shadow:0 14px 40px rgba(0,0,0,.04);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ffb-hp-tab:hover{
  transform: translateY(-2px);
  box-shadow:0 20px 60px rgba(0,0,0,.06);
}
.ffb-hp-tab.is-active{
  border-color:#d1d5db;
}

/* Visual chevron (open/close) */
.ffb-hp-tab{ position:relative; }
.ffb-hp-tab::after{
  content:"▾";
  margin-inline-start:auto;
  font-weight:900;
  opacity:.55;
  transition: transform .15s ease, opacity .15s ease;
}
.ffb-hp-tab.is-active::after{
  transform: rotate(180deg);
  opacity:.9;
}
.ffb-hp-tab-img{
  width:42px; height:42px;
  border-radius:12px;
  object-fit:cover;
  flex:0 0 auto;
}
.ffb-hp-tab-title{
  font-weight:800;
  font-size:16px;
}
.ffb-hp-panel{ display:none; }
.ffb-hp-panel.is-active{ display:block; }

.ffb-hp-panel, .ffb-hp-grid{ overflow: visible; }

/* Collapse panels when clicking the active tab again */
.ffb-host-packages.is-collapsed .ffb-hp-panel{ display:none !important; }

.ffb-hp-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:18px;
}
@media (max-width: 1200px){
  .ffb-hp-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .ffb-hp-grid{ grid-template-columns: 1fr; }
}

.ffb-hp-card{
  position:relative;
  background:#fff;
  border:1px solid #eef2f7;
  border-radius:18px;
  padding:18px 18px 16px;
  box-shadow:none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  overflow:visible;
}
.ffb-hp-card:hover{
  transform: translateY(-2px);
  box-shadow:0 10px 28px rgba(15,23,42,.08);
}
.ffb-hp-card.is-featured{
  border-color:#d1d5db;
  transform: none;
}
.ffb-hp-badge{
  position:absolute;
  top:14px;
  left:14px;
  background:#ef4444;
  color:#fff;
  padding:8px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  z-index:2;
}
.ffb-hp-card-top{
  display:flex;
  justify-content:center;
  margin: 6px 0 10px;
}
.ffb-hp-plan-img{
  width:64px; height:64px;
  border-radius:18px;
  object-fit:cover;
  box-shadow:0 18px 60px rgba(0,0,0,.10);
}
.ffb-hp-plan-title{
  text-align:center;
  font-size:20px;
  font-weight:900;
  margin: 10px 0 12px;
}
.ffb-hp-price{
  text-align:center;
  padding: 8px 0 10px;
  border-top:1px solid #f1f5f9;
  border-bottom:1px solid #f1f5f9;
  margin: 0 0 12px;
}
.ffb-hp-price-row{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:10px;
}
.ffb-hp-price-old{
  font-size:18px;
  opacity:.55;
  text-decoration:line-through;
  min-height: 22px;
}
.ffb-hp-price-main{
  font-size:56px;
  font-weight:900;
  line-height:1;
}
.ffb-hp-price-main small{
  font-size:18px;
  font-weight:800;
  vertical-align: top;
}
.ffb-hp-price-sub{
  margin-top: 6px;
  font-size:13px;
  opacity:.75;
  font-weight:700;
}
.ffb-hp-countdown{
  display:flex;
  justify-content:center;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:14px;
  border:1px dashed rgba(239,68,68,.55);
  background:rgba(239,68,68,.06);
  margin: 0 0 12px;
  font-weight:800;
  color:#b91c1c;
}
.ffb-hp-offer-ico{
  width:10px;
  height:10px;
  border-radius:999px;
  background:#ef4444;
  box-shadow:0 0 0 0 rgba(239,68,68,.45);
  animation: ffbOfferPulse 1.2s ease-in-out infinite;
}
@keyframes ffbOfferPulse{
  0%{ box-shadow:0 0 0 0 rgba(239,68,68,.35); transform:scale(1); }
  70%{ box-shadow:0 0 0 10px rgba(239,68,68,0); transform:scale(1.05); }
  100%{ box-shadow:0 0 0 0 rgba(239,68,68,0); transform:scale(1); }
}
.ffb-hp-countdown-time{
  font-variant-numeric: tabular-nums;
  color:#ef4444;
}
.ffb-hp-features{
  list-style:none;
  padding:0;
  margin:0 0 14px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.ffb-hp-feature{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-start;
  font-size:14px;
  font-weight:700;
}
.ffb-hp-ico{
  font-size:16px;
  opacity:.9;
}
.ffb-hp-tip{
  margin-inline-start:auto;
  width:20px; height:20px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:900;
  background:#fff;
  cursor:help;
  opacity:.8;
}

/* Tooltip (black transparent with white text) */
.ffb-hp-tip[data-tip]{
  position:relative;
}
.ffb-hp-tip[data-tip]::after{
  content: attr(data-tip);
  position:absolute;
  bottom: 140%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: rgba(0,0,0,.75);
  color:#fff;
  padding:10px 12px;
  border-radius:12px;
  font-size:12px;
  font-weight:700;
  line-height:1.4;
  max-width:320px;
  width: max-content;
  white-space: normal;
  word-break: break-word;
  text-align:center;
  opacity:0;
  pointer-events:none;
  transition: opacity .15s ease, transform .15s ease;
  z-index:99999;
}
.ffb-hp-tip[data-tip]::before{
  content:"";
  position:absolute;
  bottom: 124%;
  left:50%;
  transform: translateX(-50%) translateY(6px);
  border:7px solid transparent;
  border-top-color: rgba(0,0,0,.75);
  opacity:0;
  pointer-events:none;
  transition: opacity .15s ease, transform .15s ease;
  z-index:99998;
}
.ffb-hp-tip[data-tip]:hover::after,
.ffb-hp-tip[data-tip]:hover::before{
  opacity:1;
  transform: translateX(-50%) translateY(0);
}
.ffb-hp-btn{
  display:flex;
  justify-content:center;
  align-items:center;
  text-decoration:none;
  border:1px solid #d1d5db;
  border-radius:12px;
  padding:12px 14px;
  font-weight:900;
  background:#fff;
  transition: transform .15s ease, box-shadow .15s ease;
}
.ffb-hp-btn:hover{
  transform: translateY(-1px);
  box-shadow:0 18px 50px rgba(0,0,0,.08);
}
.ffb-hp-btn.is-disabled{ opacity:.55; cursor:not-allowed; }

/* --- Floating tooltip (JS) to avoid clipping/stacking issues --- */
.ffb-hp-tip[data-tip]::before,
.ffb-hp-tip[data-tip]::after{ display:none !important; }

.ffb-hp-float-tip{
  position:fixed;
  z-index:2147483647;
  background: rgba(0,0,0,.78);
  color:#fff;
  padding:10px 12px;
  border-radius:10px;
  font-size:12px;
  line-height:1.45;
  max-width: 320px;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  opacity:0;
  transform: translateY(6px);
  transition: opacity .12s ease, transform .12s ease;
  pointer-events:none;
  direction: rtl;
  text-align: right;
}
.ffb-hp-float-tip.is-visible{
  opacity:1;
  transform: translateY(0);
}
.ffb-hp-float-tip::after{
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  background: rgba(0,0,0,.78);
  transform: rotate(45deg);
  left: var(--ffb-tip-arrow-left, 50%);
  top: var(--ffb-tip-arrow-top, auto);
  bottom: var(--ffb-tip-arrow-bottom, auto);
}


/* =========================================================
   Tabs Layouts (from admin settings)
   ========================================================= */
.ffb-hp-body{ margin-top: 10px; }

/* Vertical: tabs column on the right (RTL) */
.ffb-host-packages.ffb-hp-layout-vertical .ffb-hp-body{
  display:grid;
  grid-template-columns: 1fr 280px;
  gap:16px;
  align-items:start;
}
.ffb-host-packages.ffb-hp-layout-vertical .ffb-hp-tabs{ grid-column:2; }
.ffb-host-packages.ffb-hp-layout-vertical .ffb-hp-panels{ grid-column:1; }

/* Full: each tab on a single line */
.ffb-host-packages.ffb-hp-layout-full .ffb-hp-tabs{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}

/* Accordion */
.ffb-host-packages.ffb-hp-layout-accordion .ffb-hp-tabs,
.ffb-host-packages.ffb-hp-layout-accordion .ffb-hp-panels,
.ffb-host-packages.ffb-hp-layout-accordion .ffb-hp-body{
  display:none !important;
}

.ffb-hp-accordion{ margin-top: 10px; display:flex; flex-direction:column; gap:12px; }
.ffb-hp-acc-item{
  background:#fff;
  border:1px solid #eef2f7;
  border-radius:16px;
  box-shadow:0 14px 40px rgba(0,0,0,.04);
  overflow:hidden;
}
.ffb-hp-acc-head{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  cursor:pointer;
  background:transparent;
  border:0;
  text-align:right;
  font-weight:900;
}
.ffb-hp-acc-title{ font-size:14px; }
.ffb-hp-acc-caret{
  margin-inline-start:auto;
  width:10px; height:10px;
  border-right:2px solid #111827;
  border-bottom:2px solid #111827;
  transform: rotate(45deg);
  opacity:.55;
  transition: transform .15s ease, opacity .15s ease;
}
.ffb-hp-acc-item.is-open .ffb-hp-acc-caret{
  transform: rotate(-135deg);
  opacity:.75;
}
.ffb-host-packages.ffb-hp-layout-accordion .ffb-hp-panel{
  display:none;
  padding: 0 14px 14px;
}
.ffb-host-packages.ffb-hp-layout-accordion .ffb-hp-panel.is-active{
  display:block;
}

/* =========================================================
   Tabs Styles (shape/visual)
   ========================================================= */

/* Default: cards (existing look) */
.ffb-host-packages.ffb-hp-style-cards .ffb-hp-tab{
  border:1px solid #eef2f7;
  background:#fff;
  border-radius:16px;
  box-shadow:0 14px 40px rgba(0,0,0,.04);
}

/* Segmented: professional, closer tabs (recommended) */
.ffb-host-packages.ffb-hp-style-segmented .ffb-hp-tabs{
  background:#f3f4f6;
  border:1px solid #e5e7eb;
  border-radius:18px;
  padding:6px;
  gap:6px;
}
.ffb-host-packages.ffb-hp-style-segmented .ffb-hp-tab{
  border:0;
  background:transparent;
  border-radius:14px;
  box-shadow:none;
  padding:12px 14px;
}
.ffb-host-packages.ffb-hp-style-segmented .ffb-hp-tab.is-active{
  background:#fff;
  box-shadow:0 14px 40px rgba(0,0,0,.06);
}

/* Underline: minimal with active line */
.ffb-host-packages.ffb-hp-style-underline .ffb-hp-tabs{
  background:transparent;
  border:0;
  padding:0;
  gap:14px;
  box-shadow:none;
}
.ffb-host-packages.ffb-hp-style-underline .ffb-hp-tab{
  border:0;
  background:transparent;
  border-radius:0;
  box-shadow:none;
  padding:10px 6px;
  position:relative;
}
.ffb-host-packages.ffb-hp-style-underline .ffb-hp-tab::after{
  content:"";
  position:absolute;
  left:10px; right:10px;
  bottom:-6px;
  height:3px;
  border-radius:999px;
  background:transparent;
}
.ffb-host-packages.ffb-hp-style-underline .ffb-hp-tab.is-active::after{
  background:#111827;
  opacity:.8;
}

/* Pills */
.ffb-host-packages.ffb-hp-style-pills .ffb-hp-tab{
  border:1px solid #e5e7eb;
  border-radius:999px;
  padding:10px 14px;
  box-shadow:none;
}
.ffb-host-packages.ffb-hp-style-pills .ffb-hp-tab.is-active{
  background:#111827;
  color:#fff;
  border-color:#111827;
}
.ffb-host-packages.ffb-hp-style-pills .ffb-hp-tab.is-active .ffb-hp-tab-title{ color:#fff; }

/* Minimal */
.ffb-host-packages.ffb-hp-style-minimal .ffb-hp-tab{
  border:0;
  background:#fff;
  box-shadow:none;
  padding:10px 12px;
  border-radius:12px;
}
.ffb-host-packages.ffb-hp-style-minimal .ffb-hp-tab:hover{
  transform:none;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
}

/* FirstM Unified 1.0.3 frontend stability patch: keep widgets inside Elementor containers */
.ffb-migration-section.is-fullwidth,
.ffb-whm-section.is-fullwidth,
.ffb-support-section.ffb-support-fullwidth,
.ffb-os-tabs-section.ffb-fullwidth{
  width:100%!important;
  max-width:100%!important;
  left:auto!important;
  right:auto!important;
  transform:none!important;
  margin-left:0!important;
  margin-right:0!important;
  position:relative!important;
  overflow:hidden!important;
}
.ffb-migration-section,
.ffb-whm-section,
.ffb-support-section,
.ffb-os-tabs-section,
.ffb-host-packages{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;}
.ffb-migration-section *,
.ffb-whm-section *,
.ffb-support-section *,
.ffb-os-tabs-section *,
.ffb-host-packages *{box-sizing:border-box!important;}
.ffb-ms-container,.ffb-whm-container,.ffb-support-inner,.ffb-os-tabs-inner{max-width:100%!important;margin-inline:auto!important;padding-inline:clamp(16px,3vw,32px)!important;}
.ffb-ms-grid,.ffb-whm-row,.ffb-support-wrap{min-width:0!important;}
.ffb-ms-content,.ffb-ms-media,.ffb-whm-content,.ffb-whm-media,.ffb-support-content,.ffb-support-media{min-width:0!important;max-width:100%!important;}
.ffb-ms-title,.ffb-whm-title,.ffb-support-title{overflow-wrap:break-word!important;}
.ffb-ms-desc,.ffb-whm-desc,.ffb-support-desc{overflow-wrap:break-word!important;}
.ffb-ms-image,.ffb-support-media img,.ffb-whm-card img,.ffb-whm-float img,.ffb-os-logo{max-width:100%!important;object-fit:contain!important;}
@media(max-width:860px){.ffb-ms-grid,.ffb-whm-row,.ffb-support-wrap{grid-template-columns:1fr!important;text-align:center!important}.ffb-ms-content,.ffb-whm-content,.ffb-support-content{text-align:center!important}.ffb-ms-actions{justify-content:center!important}}


/* FirstM Unified 1.0.4 host package card shadow patch */
.ffb-host-packages .ffb-hp-card{
  box-shadow:none !important;
  transform:none;
}
.ffb-host-packages .ffb-hp-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(15,23,42,.08) !important;
  border-color:#dbe3ef;
}
.ffb-host-packages .ffb-hp-card.is-featured{
  box-shadow:none !important;
  transform:none;
}
.ffb-host-packages .ffb-hp-card.is-featured:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(15,23,42,.08) !important;
}
.ffb-host-packages .ffb-hp-plan-img{
  box-shadow:none !important;
}


/* FirstM Unified 1.0.5 FINAL: remove all fixed shadow under hosting package cards; hover only gets a very light shadow */
.elementor .ffb-host-packages .ffb-hp-grid > .ffb-hp-card,
.ffb-host-packages .ffb-hp-grid > .ffb-hp-card,
.ffb-host-packages .ffb-hp-card,
.ffb-host-packages .ffb-hp-card.is-featured,
.ffb-host-packages .ffb-hp-card:not(:hover),
.ffb-host-packages .ffb-hp-card.is-featured:not(:hover){
  box-shadow:0 0 0 0 rgba(0,0,0,0) !important;
  -webkit-box-shadow:0 0 0 0 rgba(0,0,0,0) !important;
  filter:none !important;
  -webkit-filter:none !important;
  transform:none !important;
}
.ffb-host-packages .ffb-hp-card::before,
.ffb-host-packages .ffb-hp-card::after,
.ffb-host-packages .ffb-hp-card .ffb-hp-card-top::before,
.ffb-host-packages .ffb-hp-card .ffb-hp-card-top::after{
  box-shadow:none !important;
  -webkit-box-shadow:none !important;
  filter:none !important;
  -webkit-filter:none !important;
}
.ffb-host-packages .ffb-hp-plan-img,
.ffb-host-packages .ffb-hp-card-top img{
  box-shadow:none !important;
  -webkit-box-shadow:none !important;
  filter:none !important;
  -webkit-filter:none !important;
}
.elementor .ffb-host-packages .ffb-hp-grid > .ffb-hp-card:hover,
.ffb-host-packages .ffb-hp-grid > .ffb-hp-card:hover,
.ffb-host-packages .ffb-hp-card:hover,
.ffb-host-packages .ffb-hp-card.is-featured:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 8px 20px rgba(15,23,42,.055) !important;
  -webkit-box-shadow:0 8px 20px rgba(15,23,42,.055) !important;
  filter:none !important;
  -webkit-filter:none !important;
  border-color:#dbe3ef !important;
}