/* =========================================================
   portal.css — стилове за публичния портал (заявка за оферта).
   Изнесено от index.php. Палитрата е в theme.css (зареден преди този файл).
   ========================================================= */
/* СЪДЪРЖАНИЕ: токени за портала (радиус/сянка) -> база (body, фон, връзки)
   -> лого/хедър -> карти и форма за заявка -> бутони -> адаптивност.
   Палитрата (цветовете) е в theme.css, зареден преди този файл.
   ========================================================= */
    :root{ /* палитрата е в theme.css */

      --radius: 10px;
      --radius-lg: 14px;
      --shadow: 0 18px 45px rgba(0,0,0,.35);
      --control-h: 44px;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background:
        radial-gradient(900px 600px at 18% 0%, rgba(78,161,255,.22) 0%, rgba(20,42,87,.10) 38%, transparent 60%),
        radial-gradient(700px 500px at 85% 10%, rgba(35,196,131,.16) 0%, transparent 55%),
        radial-gradient(1200px 700px at 20% 110%, rgba(255,204,102,.08) 0%, transparent 60%),
        var(--bg);
      color:var(--text);
      min-height:100vh;
    }
    a{color:inherit}
    .wrap{max-width:1100px;margin:0 auto;padding:28px 18px 40px}
    .top{
      display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap;
      margin-bottom:18px;
    }
    .brand{display:flex; align-items:center; gap:12px;}
    .logoimg{width:42px;height:42px;border-radius:14px;object-fit:contain;display:block;box-shadow:0 10px 30px rgba(0,0,0,.25);} 
    .logo{
      width:42px;height:42px;border-radius:12px;
      background: linear-gradient(135deg, rgba(78,161,255,.95), rgba(35,196,131,.85));
      box-shadow: 0 10px 25px rgba(0,0,0,.35);
      position:relative; overflow:hidden;
    }
    .logo:after{
      content:"";
      position:absolute;inset:-30% -10%;
      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 55%);
      transform: rotate(18deg);
    }
    h1{font-size:18px;margin:0;letter-spacing:.25px}
    .sub{color:var(--muted);font-size:13px;margin-top:6px;max-width:720px}
    .contacts{display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:flex-end}
    .pill{
      display:inline-flex; align-items:center; gap:8px;
      padding:9px 12px; border:1px solid var(--line);
      background: rgba(255,255,255,.04);
      border-radius:999px;
      font-size:13px; color:rgba(231,238,255,.92);
      backdrop-filter: blur(8px);
    }
    .pill svg{opacity:.85}
    /* Single-column layout; center the card on wide screens */
    .grid{display:grid;grid-template-columns: 1fr;gap:16px;margin-top:16px;justify-items:center;}
    .grid .card{width:100%;max-width:720px}
    @media (max-width: 860px){.contacts{justify-content:flex-start}.grid .card{max-width:none}}
    .card{
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      border:1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .card .head{padding:16px 16px 12px;border-bottom:1px solid rgba(255,255,255,.08);background: rgba(0,0,0,.12);}
    .card .head .t{font-size:14px;font-weight:700;margin:0}
    .card .head .d{color:var(--muted);font-size:12.5px;margin-top:6px;line-height:1.35}
    .card .body{padding:16px}
    .row{display:grid;grid-template-columns: 1fr;gap:10px}
    .two{grid-template-columns: 1fr 1fr}
    @media (max-width: 520px){ .two{grid-template-columns:1fr} }
    label{font-size:12px;color:rgba(231,238,255,.86);display:block;margin:0 0 6px}
    .field{
      width:100%;height: var(--control-h);
      border-radius: 10px;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(10,18,32,.55);
      color: var(--text);
      padding: 10px 12px;
      outline:none;
      transition: border-color .15s ease, box-shadow .15s ease;
    }
    textarea.field{height:auto;min-height:120px;resize:vertical;line-height:1.35}
    .field:focus{border-color: rgba(78,161,255,.7); box-shadow: 0 0 0 4px rgba(78,161,255,.14)}
    .hint{color:var(--muted);font-size:12px;margin-top:6px;line-height:1.35}
    .actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:12px}
    .btn{
      height: var(--control-h);
      padding: 0 14px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.06);
      color: var(--text);
      cursor:pointer;
      display:inline-flex; align-items:center; gap:10px;
      font-weight:650;letter-spacing:.15px;
      transition: transform .05s ease, background .15s ease, border-color .15s ease;
    }
    .btn:hover{background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22)}
    .btn:active{transform: translateY(1px)}
    .btn.primary{background: rgba(78,161,255,.20); border-color: rgba(78,161,255,.55)}
    .btn.primary:hover{background: rgba(78,161,255,.26)}
    .btn.good{background: rgba(35,196,131,.16); border-color: rgba(35,196,131,.55)}
    .btn.good:hover{background: rgba(35,196,131,.20)}
    .btn[disabled]{opacity:.55; cursor:not-allowed}
    .status{font-size:12px;color:var(--muted)}
    .status.ok{color:rgba(35,196,131,.95)}
    .status.bad{color:rgba(255,107,107,.95)}
    .status.warn{color:rgba(255,204,102,.95)}
    .footlink{color:rgba(255,255,255,.82);text-decoration:none;}
    .footlink:hover{text-decoration:underline;}
    .footer{margin-top:18px;color: rgba(138,160,198,.75);font-size:12px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;}
    .mini{opacity:.85}
    .hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

    /* Modal */
    .modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(0,0,0,.55);backdrop-filter: blur(8px);z-index:50}
    .modal.open{display:flex}
    .modalbox{width:min(560px, 100%);border-radius:14px;border:1px solid rgba(255,255,255,.14);background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));box-shadow: 0 25px 70px rgba(0,0,0,.55);overflow:hidden}
    .modalhead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px;border-bottom:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.14)}
    .modaltitle{font-weight:800;letter-spacing:.2px}
    .closebtn{appearance:none;border:0;background:transparent;color:rgba(231,238,255,.9);cursor:pointer;font-size:18px;line-height:1;padding:6px 10px;border-radius:10px}
    .closebtn:hover{background:rgba(255,255,255,.08)}
    .modalbody{padding:14px 14px 16px}
    .modalmsg{margin:0;color:rgba(231,238,255,.92);line-height:1.45}
    .modalmsg.ok{color:rgba(35,196,131,.98)}
    .modalmsg.bad{color:rgba(255,107,107,.98)}
    .modalsub{margin-top:8px;color:rgba(138,160,198,.88);font-size:12.5px}
    .modalref{display:inline-block;margin-top:10px;padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.18);font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:12.5px}
    .modalcount{margin-top:8px;font-size:12px;color:rgba(138,160,198,.88)}