/* assets/css/summary.css
   Modal + thank you animation for Membership Box summary
*/
.mbox-summary-modal { position: fixed; inset: 0; z-index: 100020; display:none; }
.mbox-summary-modal .mbox-summary-backdrop {
  position:absolute; inset:0; background: rgba(12,18,23,0.56);
}
.mbox-summary-modal .mbox-summary-dialog {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  width: min(820px, 94%);
  max-height: 86vh;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(5,10,12,0.3);
  display:flex;
  flex-direction:column;
}
.mbox-summary-close {
  position: absolute; right: 12px; top: 8px; z-index: 2;
  border: 0; background: transparent; font-size: 22px; cursor:pointer;
}
.mbox-summary-content { padding: 22px; overflow:auto; max-height: 76vh; }

/* loading */
.mbox-summary-loading { text-align:center; padding: 36px 12px; color:#666; }

/* summary rows */
.mbox-summary-list { display:flex; flex-direction:column; gap:12px; }
.mbox-summary-row { display:flex; gap:12px; align-items:flex-start; border-bottom:1px solid #f3f3f3; padding-bottom:12px; }
.mbox-summary-thumb img, .mbox-summary-thumb > img { width:84px; height:84px; object-fit:cover; border-radius:8px; }
.mbox-summary-thumb-placeholder { width:84px; height:84px; display:grid; place-items:center; background:#f6f7f6; border-radius:8px; }
.mbox-summary-meta { flex:1; min-width:0; }
.mbox-summary-title { font-weight:700; margin-bottom:6px; color:#163b31; }
.mbox-summary-desc { color:#67707a; font-size:13px; margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* skill icons in summary */
.mbox-summary-skill-icons { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.mbox-skill-chip img { width:36px; height:36px; object-fit:contain; border-radius:6px; display:block; }
.mbox-skill-text { background:#f3f4f3; padding:6px 8px; border-radius:8px; font-weight:600; color:#55606a }

/* footer */
.mbox-summary-footer { display:flex; gap:10px; align-items:center; justify-content:flex-end; margin-top:16px; }
.mbox-btn-primary { background: linear-gradient(135deg,#06ba63,#1a7049); color:#fff; border:0; padding:10px 16px; border-radius:10px; font-weight:800; cursor:pointer; }
.mbox-btn-secondary { background:#f3f4f3; color:#163b31; border:0; padding:10px 14px; border-radius:10px; cursor:pointer; }

/* thank you screen */
.mbox-summary-thanks { text-align:center; padding:26px; }
.mbox-summary-thanks h3 { margin-top:12px; color:#163b31; }
.mbox-summary-thanks p { color:#55606a; margin-top:6px; }

/* tick animation - animate stroke-dashoffset on .mbox-tick */
.mbox-thanktick svg { display:block; margin:0 auto; }
.mbox-thanktick .mbox-tick {
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  animation: tickDraw 0.7s ease forwards 0.12s;
}
@keyframes tickDraw {
  to {
    stroke-dashoffset: 0;
  }
}

/* responsive */
@media (max-width:760px) {
  .mbox-summary-dialog { width: 94%; }
  .mbox-summary-thumb img { width:64px; height:64px; }
}
/* Mobile responsive styles */
@media (max-width: 768px) {
    .mbox-summary-modal {
        width: 95% !important;
        max-height: 85vh !important;
        margin: 10px !important;
    }
    
    .mbox-summary-row {
        flex-direction: column !important;
        padding: 12px !important;
    }
    
    .mbox-summary-thumb {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 10px !important;
    }
    
    .mbox-summary-thumb img {
        max-width: 150px !important;
        height: auto !important;
        margin: 0 auto !important;
    }
    
    .mbox-summary-footer {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .mbox-summary-footer button {
        width: 100% !important;
        min-height: 44px !important; /* Minimum tap target for mobile */
    }
    
    .mbox-skill-chip {
        margin: 4px !important;
        padding: 6px 10px !important;
        font-size: 13px !important;
    }
    
    .mbox-skill-chip img {
        height: 24px !important;
        width: auto !important;
    }
}

/* Prevent zoom on form focus for iOS */
@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    textarea {
        font-size: 16px !important;
    }
}

/* Better scrolling on mobile */
.mbox-summary-list {
    -webkit-overflow-scrolling: touch !important;
    overflow-y: auto !important;
}