/* ============================================================
   CAWFA – Photos CSS (prefix: cawfp-)
   Fully responsive modal (desktop + mobile ≤575.98px)
   • Mobile: live preview/crop HIDDEN (auto-crop only)
============================================================ */
:root{
  --cawfp-bg1:#0f0f10; --cawfp-bg2:#151515; --cawfp-card:#161616;
  --cawfp-bd:#2b2b2b; --cawfp-tx:#fff; --cawfp-dim:#c9c9c9;
  --cawfp-red:#d90404; --cawfp-red2:#b30303;
  --cawfp-ok:#cfe8d4; --cawfp-oktx:#0f3a1d;
  --cawfp-warn:#fff3cd; --cawfp-warntx:#5c4811;
  --cawfp-err:#f8d7da; --cawfp-errtx:#5f1b22;
  --cawfp-footer-h:84px;
}

/* ============================================================
   PANEL
============================================================ */
.cawfp-panel{ background:var(--cawfp-bg1); border-radius:16px; padding:18px; color:var(--cawfp-tx); }
.cawfp-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
.cawfp-title{ margin:0; font-weight:800; color:var(--cawfp-tx); font-size:1.2rem; }
.cawfp-desc{ margin:6px 0 0; color:#b7b7b7; }

/* ACTIONS */
.cawfp-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.cawfp-tbtn{ height:42px; padding:0 .9rem; border-radius:10px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; line-height:1; flex:0 0 auto; }
.cawfp-btn{ border:1px solid transparent; }
.cawfp-btn-red{ background:var(--cawfp-red); border-color:var(--cawfp-red); color:#fff; }
.cawfp-btn-red:hover{ background:var(--cawfp-red2); border-color:var(--cawfp-red2); }
.cawfp-btn-ghost{ background:#1c1c1c; border:1px solid #3a3a3a; color:#e9e9e9; }
.cawfp-btn-ghost:hover{ background:#242424; }

/* FILTERS */
.cawfp-filters{ display:flex; gap:8px; margin:12px 0 14px; flex-wrap:wrap; }
.cawfp-chip{ background:#1b1b1b; color:var(--cawfp-tx); border:1px solid #3a3a3a; border-radius:999px; padding:.35rem .9rem; flex:0 0 auto; }
.cawfp-chip-active{ background:var(--cawfp-red); border-color:var(--cawfp-red); }

/* ALERTS */
.cawfp-inline-alert,.cawfp-form-alert{ position:relative; }
.cawfp-in-alert{ border-radius:12px; padding:.6rem .9rem; border:1px solid #2c2c2c; margin:6px 0 12px; }
.alert-success.cawfp-in-alert{ background:var(--cawfp-ok); color:var(--cawfp-oktx); border-color:#a7d2b0; }
.alert-warning.cawfp-in-alert{ background:var(--cawfp-warn); color:var(--cawfp-warntx); border-color:#e4d49c; }
.alert-danger.cawfp-in-alert { background:var(--cawfp-err); color:var(--cawfp-errtx); border-color:#de9ba1; }

/* GRID CARDS */
.cawfp-col{ cursor:default; }
.cawfp-card{ background:var(--cawfp-card); border:1px solid var(--cawfp-bd); border-radius:14px; overflow:hidden; box-shadow:0 6px 16px rgba(0,0,0,.25); }
.cawfp-thumb{ position:relative; background:#0d0d0d; overflow:hidden; display:block; line-height:0; }
.cawfp-thumb.square{ aspect-ratio:1/1; }
.cawfp-thumb.vertical{ aspect-ratio:4/5; }
.cawfp-thumb.horizontal{ aspect-ratio:1080/566; }
.cawfp-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }
.cawfp-card:hover .cawfp-thumb img{ transform:scale(1.02); }

.cawfp-meta{ padding:.6rem .9rem .4rem; }
.cawfp-mtitle{ color:var(--cawfp-tx); font-weight:700; font-size:.98rem; }
.cawfp-mdesc{ color:#d0d0d0; font-size:.86rem; min-height:1.2rem; }

/* BOTTOM BAR */
.cawfp-bar{ display:flex; align-items:center; justify-content:space-between; background:#0e0e0f; border-top:1px solid #232323; padding:.55rem .6rem; }
.cawfp-drag{ display:flex; align-items:center; cursor:grab; color:#e6e6e6; gap:.4rem; }
.cawfp-badge{ background:#0c0c0c; border:1px solid #3a3a3a; color:#e0e0e0; border-radius:999px; padding:.15rem .6rem; font-size:.75rem; }
.cawfp-ops{ display:flex; gap:.45rem; }
.cawfp-btn-sm{ height:34px; padding:0 .56rem; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; }

/* EMPTY */
.cawfp-empty{ background:#141414; border:1px dashed #303030; color:#bdbdbd; border-radius:12px; padding:28px; text-align:center; }

/* SORT GHOST */
.cawfp-ghost{ opacity:.6; transform:scale(.98); }

/* ============================================================
   MODAL (DESKTOP)
============================================================ */
.cawfp-modal{ background:var(--cawfp-bg2); border:1px solid var(--cawfp-bd); color:var(--cawfp-tx); border-radius:14px; }
.cawfp-modal .modal-header{ border-bottom:1px solid #2a2a2a; }
.form-label{ color:var(--cawfp-tx); }
.form-control,.form-select{ background:#181818; border:1px solid #333; color:var(--cawfp-tx); }
.form-control::placeholder{ color:#9da3aa; }
.form-select:disabled,.form-select[disabled]{ opacity:1; color:#9da3aa; }
.form-control:focus,.form-select:focus{ background:#1b1b1b; color:#fff; border-color:#454545; box-shadow:none; }

/* CROP BOX (desktop default) */
.cawfp-cropbox{ border:1px dashed #444; border-radius:12px; background:#111; min-height:320px; display:flex; align-items:center; justify-content:center; }
.cawfp-cropbox img{ max-width:100%; display:block; }
.cawfp-placeholder{ text-align:center; color:#a8adb3; }
.cawfp-ph-ico{ font-size:1.4rem; margin-bottom:.35rem; }

/* FOOTER ACTIONS */
.cawfp-modal-actions{
  display:flex; gap:.6rem; justify-content:flex-end;
  padding:.75rem; border-top:1px solid #2a2a2a; background:var(--cawfp-bg2);
}

/* ============================================================
   MOBILE – GRID MODAL (≤575.98px) + PREVIEW HIDDEN
============================================================ */
@media (max-width: 575.98px){

  /* HEAD & ACTIONS */
  .cawfp-head{ flex-direction:column; align-items:flex-start; gap:.5rem; }
  .cawfp-actions{ width:100%; gap:.5rem; }
  .cawfp-actions .cawfp-tbtn{ flex:1 1 auto; width:100%; }
  #cawfpList > .cawfp-col{ width:100%; }

  /* MODAL DIALOG */
  .modal-dialog.modal-fullscreen-sm-down{
    width:100%;
    max-width:96vw;
    margin:12px auto;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  /* GRID LAYOUT */
  .modal-dialog.modal-fullscreen-sm-down .modal-content{
    display:grid;
    grid-template-rows: auto 1fr auto; /* header / body / footer */
    width:100%;
    max-height:min(650px, calc(100dvh - 24px));
    border-radius:14px;
    overflow:hidden;
  }

  /* BODY SCROLL AREA */
  .modal-dialog.modal-fullscreen-sm-down .modal-body{
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    padding:16px;
  }

  /* FOOTER AT BOTTOM (ROW 3) */
  .cawfp-modal-actions{
    position:relative;
    z-index:1;
    padding:.75rem .9rem;
    background:var(--cawfp-bg2);
    border-top:1px solid #2a2a2a;
  }

  /* FORM WIDTH */
  .cawfp-modal .form-label,
  .cawfp-modal .form-control,
  .cawfp-modal .form-select{ width:100%; }

  /* === IMPORTANT: HIDE PREVIEW ON MOBILE === */
  .cawfp-cropbox,
  .cawfp-cropbox *{
    display:none !important;
  }
  /* Restore small visual rhythm when preview is removed */
  .cawfp-cropbox{ min-height:0; border:0; padding:0; margin:0; }

  /* A little more room for fields */
  .cawfp-modal .form-label{ margin-top:.5rem; }
}

/* ============================================================
   RTL
============================================================ */
.cawfp-rtl { direction: rtl; }
.cawfp-rtl .me-1{ margin-right:0!important; margin-left:.25rem!important; }
.cawfp-rtl .me-2{ margin-right:0!important; margin-left:.5rem!important; }
.cawfp-rtl .cawfp-head{ flex-direction: row-reverse; }
.cawfp-rtl .cawfp-actions{ justify-content:flex-start; }
.cawfp-rtl .cawfp-bar{ flex-direction: row-reverse; }
.cawfp-rtl .cawfp-filters{ justify-content:flex-start; }
.cawfp-rtl .form-label,
.cawfp-rtl .form-control,
.cawfp-rtl .form-select,
.cawfp-rtl .cawfp-meta,
.cawfp-rtl .cawfp-empty{ text-align:right; }