/* =========================
   AWP Buttons + Modal (clean)
   ========================= */

/* --- Buttons grid --- */
#ph-awp-nav{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
  padding:10px;
  background:#fff;
  border-bottom:1px solid #eee;
  position:sticky;
  top:0;
  z-index:5;
}

@media (max-width:1200px){ #ph-awp-nav{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:768px){  #ph-awp-nav{ grid-template-columns:repeat(2, 1fr);} 
#awp_container, .pb-left-column {
    width: 100%;
    /*display: inline-flex;
    position: relative ;*/
  }
} 


.ph-awp-btn{
  border:1px solid #e6e6e6;
  background:#fafafa;
  border-radius:999px;
  padding:14px 12px;
  font-weight:700;
  cursor:pointer;
  text-align:center;
  line-height:1.1;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.ph-awp-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  background:#fff;
}

.ph-awp-btn .ph-req{
  color:#d40000;
  font-weight:800;
  margin-right:6px;
}

/* --- Buttons mode: hide raw wizard list (but keep stock container) --- */
.ph-awp-buttons-mode #awp_wizard{
  display:none !important;
}

.ph-awp-buttons-mode .awp_stock_container{
  display:block !important;
}

/* --- Disable native accordion toggling in buttons-mode (optional but recommended) --- */
.ph-awp-buttons-mode #awp_container .awp_header_collapible{
  pointer-events:none !important;
}
.ph-awp-buttons-mode #awp_container .open_close{
  display:none !important;
}

/* IMPORTANT:
   Do NOT hide .awp_content globally here.
   Because we hide #awp_wizard entirely, there is nothing to hide in the panel.
   Hiding .awp_content causes surprises when boxes are moved into the modal.
*/


/* =========================
   Modal (single definition)
   Centered fancybox-like
   ========================= */

#ph-awp-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  z-index:9998;

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:opacity .18s ease, visibility 0s linear .18s;
}

#ph-awp-modal {
    position: fixed;
    z-index: 9999;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 22px 60px rgba(0,0,0,.25);
    overflow: hidden;
    width: 30%;
    max-height: calc(100vh - 80px);
    top: 80px;
    right: 10px;
    left: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .18s ease, opacity .18s ease, visibility 0s linear .18s;
}

/* Open state */
#ph-awp-backdrop.ph-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .18s ease;
}

#ph-awp-modal.ph-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  /*transform:translate(-50%, -50%);*/
  transition:transform .18s ease, opacity .18s ease;
}

#ph-awp-modal-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 16px;
  border-bottom:1px solid #eee;
  font-weight:800;
}

#ph-awp-modal-close{
  border:0;
  background:#f2f2f2;
  border-radius:999px;
  width:38px;
  height:38px;
  cursor:pointer;
}

#ph-awp-modal-body{
  padding:14px 16px 16px;
  overflow:auto;
  max-height:calc(100vh - 160px);
}

/* Ensure moved AWP group renders normally inside modal */
#ph-awp-modal-body .awp_box_inner {
    float: none !important;
    margin: 0 !important;
}
#ph-awp-modal-body .awp_content{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
}
#awp_container {
    width: 25%;
    display: flex;
    position: relative;
    float: right;
    height: 700px;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-around;
}
.style_content.block_content {
    display: flex;
    gap: 10px;
}
.style_content>.easycontent_s5.clearfix {
    padding-right: 70px;
}
.buttons_bottom_block{display:none;}
#usefull_link_block{
	margin-bottom: 0px;
}
.pb-center-column{
    justify-content: space-evenly;
    display: flex;
    flex-direction: column;
    position: relative;
    top: 60px;
}

@media (max-width:1200px){
	#ph-awp-nav{
		grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:768px){
	#ph-awp-nav{
		grid-template-columns:repeat(2, 1fr);
	}
	.primary_block.row{
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
	}
	#awp_container {
		width: 100%;
		height: auto;
	}
	#ph-awp-modal {
		width: 96%;
		top: 27px;
	}
	#buy_block{
		width: auto;
		padding: 20px;
}
	}
}