/* ai-aiservice.css
   Shared UI for all AI services (follow pattern)
   - Use variables at top
   - Order of properties kept consistent per your pattern rules
*/

/* ---------------------- Root colors & typography ---------------------- */
:root {
  --bg-color: #f8fafc;
  --primary: #0078d7;
  --primary-dark: #005fa3;
  --accent: #00bfa6;
  --text: #0f172a;
  --muted: #475569;
  --card-bg: #ffffff;
  --border: #e5e7eb;
}

html, body {
  display: block;
  position: static;
  float: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--bg-color);
  color: var(--text);
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing:antialiased;
}

/* ---------------------- Service container ---------------------- */
.service-container {
  display: block;
  position: relative;
  float: none;
  width: 92%;
  max-width: 980px;
  margin: 18px auto;
  padding: 22px;
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.06);
  border: 1px solid var(--border);
  z-index: 10;
}

/* ---------------------- Headings ---------------------- */
.service-container h2 {
  display: block;
  position: relative;
  float: none;
  width: auto;
  height: auto;
  margin: 0 0 10px 0;
  padding: 0;
  color: var(--primary-dark);
  font-size: 22px;
  font-weight: 600;
}

/* ---------------------- Accordions ---------------------- */
.accordion {
  display: block;
  position: relative;
  float: none;
  width: 100%;
  margin: 12px 0 0 0;
  padding: 10px 14px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  z-index: 9;
}
.accordion:hover { background: var(--primary-dark); }

.panel {
  display: none;
  position: relative;
  float: none;
  width: 100%;
  margin: 8px 0 0 0;
  padding: 14px;
  background: #f8fafb;
  border-radius: 8px;
  border: 1px solid var(--border);
  z-index: 8;
  word-wrap: break-word;
  white-space: pre-wrap; /* preserve newlines but wrap */
}

/* ---------------------- Output box ---------------------- */
.output-box {
  display: block;
  position: relative;
  float: none;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid var(--border);
  box-sizing: border-box;
  color: var(--text);
  font-size: 15px;
  line-height: 1.65;
  z-index: 7;
}

/* ---------------------- Buttons ---------------------- */
.button-group {
  display:flex;
  position:relative;
  float:none;
  width:auto;
  margin: 18px 0 0 0;
  padding: 0;
  gap: 12px;
  justify-content:center;
  z-index:7;
}

.action-btn {
  display:inline-block;
  position:relative;
  float:none;
  min-width: 120px;
  margin: 0;
  padding: 12px 20px;
  border-radius: 8px;
  border: none;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  z-index: 6;
}
.action-btn.print {
  background: var(--accent);
  color:#fff;
}
.action-btn:focus { outline: none; box-shadow: 0 4px 12px rgba(2,6,23,0.08); }

/* ---------------------- Responsive tweaks ---------------------- */
@media (max-width:640px){
  .service-container { width: 96%; padding:16px; }
  .action-btn { min-width: 100px; padding:10px 12px; }
}

/* ===============================
   UNIVERSAL 1-COLUMN AI FORM
   Mobile + Desktop Same Layout
================================ */
.ai-form {
width: 100%;
max-width: 800px;
margin: auto;
padding: 15px;
box-sizing: border-box;
}

/* Each field block */
.ai-field {
margin-bottom: 18px;
}

/* Labels */
.ai-form label {
display: block;
font-weight: 600;
margin-bottom: 6px;
font-size: 15px;
}

/* Inputs */
.ai-form input[type="text"],
.ai-form input[type="email"],
.ai-form input[type="number"],
.ai-form input[type="date"],
.ai-form textarea,
.ai-form select {
width: 100%;
padding: 11px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 6px;
box-sizing: border-box;
background: #fff;
}

/* Textarea */
.ai-form textarea {
min-height: 120px;
resize: vertical;
}

/* Checkbox & radio inline */
.ai-form .ai-check {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
}

/* Submit button */
.ai-form button {
width: 100%;
padding: 13px;
font-size: 16px;
background: #007bff;
color: #fff;
border: none;
border-radius: 6px;
cursor: pointer;
}

.ai-form button:hover {
background: #0056b3;
}

@media (max-width:640px)
{
  .service-container { width: 96%; padding:16px; }
  .action-btn { min-width: 100px; padding:10px 12px; }
}

/* ===============================
   AAI UNIVERSAL FORCE FORM FIX
================================ */

form,
form > div {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

form {
  display: block !important;
}

form > div {
  float: none !important;
  flex: none !important;
  grid: none !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
}

form label {
  display: block !important;
  width: 100% !important;
  margin: 0 0 6px 0 !important;
  font-size: 15px !important;
}

form input,
form select,
form textarea {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 10px !important;
  font-size: 16px !important;
}

form input[type="checkbox"] {
  width: auto !important;
  margin: 0 8px 0 0 !important;
}

form button {
  display: block !important;
  width: 100% !important;
  margin-top: 10px !important;
}

form .full-width,
form .half,
form .col,
form .row,
form .field {
  width: 100% !important;
  display: block !important;
  float: none !important;
}



/*
| 🎨 API RESULT WORD-STYLE CSS (Add to `ai-aiservice.css` only)
*/
.ai-word-doc {
    background: #ffffff;
    padding: 20px;
    border: 1px solid #ccc;
    line-height: 1.6;
    font-family: Calibri, Arial, sans-serif;
}

.ai-h1 {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 12px;
    border-bottom: 2px solid #000;
    padding-bottom: 5px;
}

.ai-h2 {
    font-size: 18px;
    font-weight: bold;
    margin-top: 18px;
    margin-bottom: 8px;
}

.ai-p {
    margin-bottom: 10px;
    text-align: justify;
}

.ai-ol {
    margin-left: 22px;
    margin-bottom: 10px;
}

.ai-ul {
    margin-left: 22px;
    margin-bottom: 10px;
}
/* +++++++++++++++++++++++ */
@media print {

  body {
    height: auto !important;
    overflow: visible !important;
  }

  .ai-word-doc,
  .ai-word-doc * {
    height: auto !important;
    overflow: visible !important;
    max-height: none !important;
  }

  .ai-word-doc {
    page-break-after: auto;
    page-break-inside: auto;
  }

  ul, p, div {
    page-break-inside: avoid;
  }

  .no-print {
    display: none !important;
  }

}