/* assets/css/util.css */

:root{
    --pp-orange:#ff4500;
    --pp-gray-666:#666;
    --pp-gray-999:#999;
    --pp-blue:#007bff;
  }
  
  /* ===== Typo / Align ===== */
  .u-center{ text-align:center; }
  .u-left{ text-align:left; }
  .u-bold{ font-weight:700; }
  .u-fw-600{ font-weight:600; }
  .u-fw-800{ font-weight:800; }
  
  .u-fs-11{ font-size:11px; }
  .u-fs-12{ font-size:12px; }
  .u-fs-13{ font-size:13px; }
  .u-fs-14{ font-size:14px; }
  .u-fs-15{ font-size:15px; }
  .u-lh-14{ line-height:1.4; }
  .u-lh-16{ line-height:1.6; }
  
  .u-text-orange{ color:var(--pp-orange); }
  .u-text-gray{ color:var(--pp-gray-666); }
  .u-text-gray-999{ color:var(--pp-gray-999); }
  .u-text-blue{ color:var(--pp-blue); }
  
  /* ===== Spacing ===== */
  .u-mb-5{ margin-bottom:5px; }
  .u-mb-10{ margin-bottom:10px; }
  .u-mb-15{ margin-bottom:15px; }
  .u-mt-15{ margin-top:15px; }
  
  .u-pt-10{ padding-top:10px; }
  .u-bt-eee{ border-top:1px solid #eee; }
  
  /* ===== Flex helpers ===== */
  .u-flex{ display:flex; }
  .u-items-center{ align-items:center; }
  .u-justify-center{ justify-content:center; }
  .u-gap-8{ gap:8px; }
  .u-gap-10{ gap:10px; }
  .u-flex-wrap{ flex-wrap:wrap; }
  
  /* ===== Specific components that were inline ===== */
  
  /* user-status */
  .user-status{
    text-align:center;
    color:var(--pp-orange);
    font-weight:700;
    margin-bottom:10px;
  }
  
  /* intro paragraph under h2 */
  .intro{
    font-size:12px;
    color:var(--pp-gray-666);
    line-height:1.4;
    text-align:center;
    margin-bottom:15px;
  }
  
  /* product line row (prod + buy link) */
  .product-row{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }
  
  /* buy link in product row */
  .buy-link-inline{
    font-size:13px;
    font-weight:600;
    color:var(--pp-blue);
    text-decoration:none;
  }
  
  /* ai chat input area */
  .ai-chat-area{
    display:none;
    padding:10px;
    border-top:1px dashed #ffe0d0;
  }
  
  /* follow-up row inside ai chat area */
  .ai-follow-row{
    display:flex;
    gap:8px;
    margin-bottom:10px;
  }
  .ai-follow-input{
    font-size:13px;
    flex:1;
  }
  .ai-follow-send{
    background:var(--pp-orange);
    color:#fff;
    border:none;
    border-radius:8px;
    padding:5px 15px;
    cursor:pointer;
  }
  
  /* strategy reminder block */
  .strategy-reminder{
    font-size:12px;
    margin-top:15px;
    color:var(--pp-gray-666);
    border-top:1px solid #eee;
    padding-top:10px;
  }