/* demo.html – original styles extracted from the HTML. */
:root{
      --cmpat-blue:#0078D2;
      --cmpat-blue-dark:#0078D2;
      --cmpat-border:#0078D2;
      --cmpat-muted:#6b7280;
      --cmpat-bg:#ffffff;
      --cmpat-soft:#f6f7f9;
    }
    body{
      background:var(--cmpat-bg) !important;
      color:#111827 !important;
      margin:0;
    }
    a{ color:var(--cmpat-blue); }
    a:hover{ color:var(--cmpat-blue-dark); }

    /* Container fallback (in case ../style.css defines something unexpected) */
    .cmpat-wrap{
      width:97%;
      padding-left:1%;
      padding-right:1%;
      margin: 0 auto;
    }
    .material-symbols-outlined{
      font-size:36px;
      font-weight:normal;
      color:#0078D2;
      vertical-align:middle;
    }

    /* App-like header */
    .cmpat-header{
      background:#ffffff;
      border-bottom-color:#0078D2;
      border-bottom-width:5px;
      border-bottom-style:solid;
    }
    .cmpat-header-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:5px;
      padding:0px 0;
    }
    .cmpat-logo{
      height:85px;
      width:auto;
      display:block;
    }

    /* Page title */
    .cmpat-title{
      margin: 5px 0 8px 0;
      font-size: 2rem;
      letter-spacing: 0.2px;
    }

    /* Tabs */
    .cmpat-tabs{
      display:flex; flex-wrap:wrap; gap:8px;
      margin: 0 0 16px 0;
    }
    .cmpat-tab{
      text-decoration:none;
      padding:8px 12px;
      border:1px solid var(--cmpat-blue);
      border-radius:10px;
      background:var(--cmpat-soft);
      color:var(--cmpat-blue);
      font-weight:bold;
    }
    .cmpat-tab:hover{ font-weight:bold; }
    .cmpat-tab.active{
      background:var(--cmpat-blue);
      border-color:var(--cmpat-blue);
      color:#ffffff;
      font-weight:bold;
    }

    /* Cards + layout */
    .cmpat-grid{
      display:grid;
      grid-template-columns: 1.6fr 0.4fr;
      gap:10px;
      align-items:start;
    }
    @media (max-width: 900px){
      .cmpat-grid{ grid-template-columns:1fr; }
    }
    .cmpat-card{
      border:1px solid var(--cmpat-border);
      border-radius:10px;
      padding:10px 10px;
      background:#ffffff;
      box-shadow: 0 1px 0 rgba(17,24,39,0.02);
    }

    /* === Demo form (mirrors the Support page styling) === */
    form.cmpat-form{
      margin-top: 12px;
      padding: 14px 14px;
      border: 1px solid #e6e6ea;
      border-radius: 10px;
      background: var(--cmpat-soft);
    }
    form.cmpat-form label{
      display:block;
      margin: 12px 0 6px;
      font-weight: 700;
      color:#111827;
      font-size: 0.95em;
    }
    form.cmpat-form input,
    form.cmpat-form textarea,
    form.cmpat-form select{
      width: 100%;
      box-sizing: border-box;
      padding: 10px 10px;
      border-radius: 10px;
      border: 1px solid #cfcfd6;
      background:#ffffff;
      font-size: 0.98em;
    }
    form.cmpat-form textarea{ min-height: 120px; resize: vertical; }
    .row{ display:flex; gap: 12px; }
    .row > div{ flex:1; }
    @media (max-width: 700px){
      .row{ flex-direction:column; }
    }
    .btn{
      margin-top: 14px;
      padding: 10px 14px;
      border-radius: 12px;
      border: 0;
      cursor: pointer;
      background: var(--cmpat-blue);
      color: #ffffff;
      font-weight: 800;
      font-size: 0.98em;
	  font-family:inherit; 
    }
    .btn:hover{ background: var(--cmpat-blue-dark); }
    .small{ font-size: 0.92rem; }
    .muted{ color: var(--cmpat-muted); }
    .hp{ display:none; } /* honeypot */

    /* Footer */
    .cmpat-foot{
      margin: 26px 0 20px 0;
      color: var(--cmpat-muted);
      font-size: 0.92rem;
    }