/* DD Photobook Editor - File 2 (photobook-editor.css) */

/* Global font */
*{
  font-family: 'Rubik';
}

.ddpb-pro-toolbar{display:none !important;}
.my-cube-btn{display:none !important;}
/* Root */
.ddpb-root{
  direction:rtl;
  font-family:system-ui,-apple-system,"Segoe UI",Arial;
  max-width:1400px;
  margin:18px auto;
  padding:0 14px;
  box-sizing:border-box;
}

/* Card */
.ddpb-card{
  background:#fff;
  border:1px solid #eee;
  border-radius:18px;
  padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.ddpb-title{
  font-weight:900;
  font-size:34px;
  text-align:center;
}

.ddpb-sub{
  opacity:.55;
  text-align:center;
  margin:6px 0 14px;
  font-weight:800;
}

.ddpb-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:14px 0 10px;
}

.ddpb-row-right{
  display:flex;
  justify-content:flex-end;
  margin-top:14px;
}

.ddpb-h2{
  font-weight:900;
  font-size:18px;
}

.ddpb-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.ddpb-primary{
  padding:14px 18px;
  border:none;
  border-radius:16px;
  background:#00b39b;
  color:#fff;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 10px 18px rgba(0,179,155,.18);
}

.ddpb-btn,
.ddpb-upload{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border:1px solid #e8e9ee;
  border-radius:16px;
  background:#fff;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(0,0,0,.04);
}

.ddpb-btn:hover,
.ddpb-upload:hover{
  border-color:#dcdde4;
}

/* Dropzone */
.ddpb-dropzone-wrap{
  margin:10px 0 14px;
}

#ddpb_dz.dropzone{
  background:#fafafa;
  border:2px dashed #bbb;
  border-radius:18px;
  min-height:140px;
  padding:12px;
}

#ddpb_dz.dropzone .dz-message{
  font-weight:900;
  color:#444;
}

#ddpb_dz.dropzone .dz-preview{
  border-radius:16px;
  overflow:hidden;
}

#ddpb_dz.dropzone .dz-image{
  border-radius:16px;
}

#ddpb_dz.dropzone .dz-remove{
  font-weight:900;
}

/* Gallery thumbnails */
.ddpb-gallery{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:12px;
}

@media (max-width:1100px){
  .ddpb-gallery{grid-template-columns:repeat(4,1fr)}
}

@media (max-width:680px){
  .ddpb-gallery{grid-template-columns:repeat(2,1fr)}
}

.ddpb-thumb{
  border:1px solid #e8e9ee;
  border-radius:0px;
  overflow:hidden;
  background:#fafafa;
  position:relative;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
}

.ddpb-thumb img{
  width:100%;
  height:150px;
  object-fit:cover;
  display:block;
}

.ddpb-del{
  position:absolute;
  top:10px;
  left:10px;
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.92);
  cursor:pointer;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Processing screen */
.ddpb-processing{
  text-align:center;
  padding:18px;
}

.ddpb-spinner{
  margin:0 auto 14px;
  width:72px;
  height:72px;
  border-radius:999px;
  border:6px solid #eee;
  border-top-color:#00b39b;
  animation:ddpbspin 1s linear infinite;
}

.ddpb-processing-title{
  font-weight:900;
  font-size:18px;
}

.ddpb-processing-sub{
  opacity:.75;
  margin-top:6px;
}

.ddpb-prog{
  margin-top:14px;
  font-weight:900;
}

.ddpb-bar{
  margin-top:10px;
  height:10px;
  background:#eee;
  border-radius:999px;
  overflow:hidden;
}

.ddpb-bar-inner{
  height:10px;
  width:0%;
  background:#00b39b;
}

@keyframes ddpbspin{
  to{transform:rotate(360deg)}
}

/* Price bar */
.ddpb-pricebar{
  margin:10px 0 14px;
  padding:12px 14px;
  border:1px solid #e8e9ee;
  border-radius:16px;
  background:#fafafa;
  font-weight:900;
}

/* Pages layout: Desktop 2 per row, Mobile 1 per row */
.ddpb-pages-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
}

@media (max-width:820px){
  .ddpb-pages-grid{grid-template-columns:1fr}
}

/* Page card */
.ddpb-page-card{
  border:1px solid #e8e9ee;
  border-radius:0px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.ddpb-page-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  background:#fbfbfd;
  border-bottom:1px solid #e8e9ee;
}

.ddpb-page-title{
  font-weight:900;
}

.ddpb-page-tools{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.ddpb-tool{
  padding:6px 10px;
  border:1px solid #e8e9ee;
  border-radius:999px;
  background:#fff;
  cursor:pointer;
  font-weight:900;
  font-size:12px;
  min-width:34px;
  text-align:center;
}

.ddpb-tool:hover{border-color:#dcdde4}
.ddpb-tool:disabled{opacity:.35;cursor:not-allowed}
.ddpb-tool.danger{border-color:rgba(220,38,38,.25)}

/* Modal (Pick) */
.ddpb-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.38);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:99999;
}

.ddpb-modal-box{
  width:min(980px,94vw);
  background:#fff;
  border-radius:18px;
  padding:18px;
  text-align:right;
  box-shadow:0 30px 70px rgba(0,0,0,.25);
}

.ddpb-modal-title{
  font-weight:900;
  font-size:16px;
  margin-bottom:10px;
}

.ddpb-pick-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:10px;
  max-height:60vh;
  overflow:auto;
  padding:6px;
  border:1px solid #e8e9ee;
  border-radius:14px;
  background:#fafafa;
}

@media (max-width:640px){
  .ddpb-pick-grid{grid-template-columns:repeat(2,1fr)}
}

.ddpb-pick-item{
  border:1px solid #e8e9ee;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  cursor:pointer;
}

.ddpb-pick-item:hover{
  box-shadow:0 10px 20px rgba(0,0,0,.08);
}

.ddpb-pick-item img{
  width:100%;
  height:120px;
  object-fit:cover;
  display:block;
}

.ddpb-modal-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:12px;
}

/* Count line */
.ddpb-count{
  margin:10px 0 0;
  font-weight:900;
  opacity:.75;
}

/* Pending overlay (upload progress) */
.ddpb-pending{position:relative}
.ddpb-pending::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.55)}

.ddpb-pending-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  z-index:2;
  font-weight:900;
}

.ddpb-pending-bar{
  width:70%;
  height:8px;
  background:#eee;
  border-radius:999px;
  overflow:hidden;
}
.ddpb-pending-bar > div{
  height:8px;
  width:0%;
  background:#00b39b;
}

.ddpb-pending-txt{font-size:12px;opacity:.85}
.ddpb-pending-err{color:#b00020;font-size:12px}

/* Albums box */
.ddpb-albums-wrap{
  margin:10px 0 14px;
  padding:12px;
  border:1px solid #eee;
  border-radius:12px;
  background:#fff;
}

.ddpb-albums-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.ddpb-albums-title{font-weight:900}
.ddpb-albums-status{font-weight:900;font-size:12px;opacity:.7}

.ddpb-albums-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:10px;
}

.ddpb-albums-select{
  min-width:240px;
  padding:10px;
  border:1px solid #ddd;
  border-radius:10px;
  background:#fff;
}
@media (max-width: 768px){
  .ddpb-gridwrap{
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1.7 / 1 !important;
  }

  .ddpb-gridwrap .grid-stack{
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}
/* GridStack inside page */
.ddpb-gridwrap{
  padding:0px;
  background:#fff;
  border:1px solid #e8e9ee;
  border-radius:0px;
  overflow:hidden;
  position:relative;
  width:100%;
}

.ddpb-gridwrap .grid-stack{
  background:#fff;
  width:100%;
  height:100%;
}

.ddpb-gridwrap .grid-stack-item-content{
  border:1px dashed rgba(17,24,39,.18);
  border-radius:0px;
  overflow:hidden;
  background:#f3f4f6;
  position:relative;
}

.ddpb-grid-item-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.ddpb-grid-empty{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  opacity:.6;
}

.ddpb-grid-action{
  position:absolute;
  bottom:10px;
  left:10px;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.92);
  cursor:pointer;
  font-weight:900;
  font-size:12px;
  box-shadow:0 8px 16px rgba(0,0,0,.08);
  z-index:5;
}
.ddpb-gridwrap .grid-stack{
  height: 100% !important;
  min-height: 100% !important;
}
.ddpb-gs-spacer{
  visibility: hidden !important;
}

/* ===== Cropper (Edit Image) ===== */
.ddpb-crop-bg{width:100%;height:100%;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;}

.ddpb-edit-box{width:min(980px,94vw);}
.ddpb-edit-body{display:flex;flex-direction:column;gap:12px;}
.ddpb-edit-canvas{width:100%;max-height:60vh;overflow:hidden;border:1px solid #e8e9ee;border-radius:14px;background:#fafafa;}
.ddpb-edit-canvas img{max-width:100%;display:block;}
.ddpb-edit-tools{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.ddpb-edit-tool{padding:8px 12px;border-radius:12px;}

@media (max-width:640px){
  .ddpb-edit-canvas{max-height:55vh;}
}



/* ===== CropperJS modal click-fix (no overlay over buttons) ===== */
.ddpb-edit-body{ position:relative; }
.ddpb-edit-canvas{
  position:relative;
  width:100%;
  height:60vh;          /* fixed height so cropper can't overflow and cover buttons */
  max-height:none;      /* override previous max-height approach */
  overflow:hidden;
  border:1px solid #e8e9ee;
  border-radius:14px;
  background:#fafafa;
  z-index:1;
}
@media (max-width:640px){
  .ddpb-edit-canvas{ height:55vh; }
}
.ddpb-edit-canvas img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.ddpb-edit-canvas .cropper-container{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
}
.ddpb-edit-tools,
.ddpb-modal-actions{
  position:relative;
  z-index:50; /* above cropper overlay */
}



/* ===== CropperJS HARD clickability fix ===== */
.ddpb-edit-box{ position:relative; }
.ddpb-edit-body{ position:relative; display:flex; flex-direction:column; gap:10px; }

.ddpb-edit-canvas{ isolation:isolate; } /* new stacking context */
.ddpb-edit-canvas .cropper-container,
.ddpb-edit-canvas .cropper-wrap-box,
.ddpb-edit-canvas .cropper-canvas,
.ddpb-edit-canvas .cropper-drag-box,
.ddpb-edit-canvas .cropper-crop-box{
  z-index:1 !important;
}

.ddpb-edit-tools,
.ddpb-modal-actions{
  position:relative !important;
  z-index:9999 !important;
}


/* ===== PRO Canva-like UI ===== */
.ddpb-pro-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 14px;
  padding:12px 14px;
  border:1px solid #e8e9ee;
  border-radius:18px;
  background:linear-gradient(180deg,#ffffff 0%,#fafcff 100%);
  box-shadow:0 10px 24px rgba(0,0,0,.05);
}
.ddpb-pro-toolbar-left,
.ddpb-pro-toolbar-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.ddpb-pro-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  background:#111827;
  color:#fff;
  font-weight:900;
  font-size:12px;
}

.ddpb-pro-status{min-height:20px;font-size:12px;font-weight:800;color:#6b7280;}


.ddpb-page-title{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.ddpb-page-inline-auto{
  appearance:none;
  border:1px solid rgba(99,102,241,.22);
  background:#fff;
  color:#374151;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  line-height:1;
}
.ddpb-page-inline-auto:hover{
  border-color:rgba(99,102,241,.4);
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}