.pwn-solution-form {
  font-family: "Open Sans", Arial, sans-serif;
  color: #333;
  background-color: #fafafa;
  padding: 1rem 1.25rem 2rem;
}

/* Card container */
.pwn-solution-form .card {
  border-radius: 10px;
  border: 1px solid #e0ddee;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  margin-top: 1.5rem;
  background-color: #fff;
}

/* Header */
.pwn-solution-form .card-header {
  background-color: #f6f4fa; /* soft lavender */
  border-bottom: 1px solid #ddd;
  color: #4B286D;
  font-weight: 600;
  font-size: 1.05rem;
  padding: 0.9rem 1.25rem;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

/* Inner headings */
.pwn-solution-form h6 {
  color: #4B286D;
  font-weight: 600;
  margin-top: 1.25rem;
  margin-bottom: 0.75rem;
}

/* Form labels */
.pwn-solution-form .form-label {
  font-weight: 500;
  color: #444;
  margin-bottom: 0.25rem;
}

/* Input fields */
.pwn-solution-form .form-control {
  border-radius: 6px;
  border: 1px solid #ccc;
  padding: 0.45rem 0.75rem;
  font-size: 0.95rem;
}

.pwn-solution-form .form-control:focus {
  border-color: #4B286D;
  box-shadow: 0 0 0 0.15rem rgba(75, 40, 109, 0.25);
}

/* Checkbox + Radio alignment */
.pwn-solution-form .form-check-inline {
  margin-right: 1rem;
  margin-bottom: 0.25rem;
}

/* Toolbar buttons (Export / Save / Submit) */
.pwn-solution-form .toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.pwn-solution-form .btn {
  cursor: pointer;
}

.pwn-solution-form .btn:not(table *) {
  border-radius: 6px;
  font-weight: 500;
  min-width: 120px;
}

.pwn-solution-form .btn-success,
.pwn-solution-form .btn-primary {
  background-color: #4B286D;
  border-color: #4B286D;
  color: #fff;
}

.pwn-solution-form .btn-success:hover,
.pwn-solution-form .btn-primary:hover {
  background-color: #3d205d;
}

.pwn-solution-form .btn-outline-primary {
  color: #4B286D;
  border-color: #4B286D;
}

.pwn-solution-form .btn-outline-primary:hover {
  background-color: #4B286D;
  color: #fff;
}

/* Alert style */
.pwn-solution-form .alert-light {
  background-color: #f9f9fb;
  border: 1px solid #eee;
  color: #555;
}

/* Site Card */
.pwn-solution-form .card .card-header button {
  text-decoration: none;
  color: #4B286D;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.25rem 0;
}

.pwn-solution-form .card .card-header button:hover {
  color: #3d205d;
}

/* Bottom sticky section */
.pwn-solution-form .bottom-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
}

.pwn-solution-form .mandatory {
  color: #c00;
}

/* --- PWN Pill Toggle Buttons (with visible checkbox) --- */
.pwn-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.25rem;
}

.pwn-pill-group label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid #d6d2e5;
  border-radius: 10px;
  padding: 0.6rem 1.2rem;
  font-size: 0.95rem;
  cursor: pointer;
  user-select: none;
  background-color: #fff;
  color: #4B286D;
  font-weight: 500;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  min-width: 150px;
  text-align: center;
}

.pwn-pill-group label:hover {
  border-color: #4B286D;
  background-color: #f6f3fa;
}

/* Active pill */
.pwn-pill-group label.active {
  background-color: #f2edf8;
  border-color: #4B286D;
  box-shadow: 0 0 0 2px rgba(75, 40, 109, 0.15);
}

/* --- Checkbox Circle --- */
.pwn-checkbox {
  width: 18px;
  height: 18px;
  border: 2px solid #b6acd3;
  border-radius: 4px;
  display: inline-block;
  position: relative;
  background: #fff;
  transition: all 0.2s ease;
}

.pwn-checkbox.checked {
  background-color: #4B286D;
  border-color: #4B286D;
}

.pwn-checkbox.checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Icon wrapper that rotates */
.pwn-icon-wrapper {
  display: inline-block;
  margin-right: 0.5rem;
  transition: transform 0.2s ease;
  width: 14px;
  text-align: center;
}

.pwn-icon-wrapper.expanded {
  transform: rotate(90deg);
}

.pwn-icon-wrapper i,
.pwn-icon-wrapper svg {
  color: #4B286D !important;
  fill: #4B286D !important;
}

/* Ensure SVG path also gets the color */
.pwn-icon-wrapper svg path {
  fill: #4B286D !important;
}

/* ========== ADD THESE STYLES FOR PWN SITE CARDS ========== */

/* PWN Site Card */
.pwn-site-card {
  border: 1px solid #e0ddee;
  border-radius: 8px;
  margin-bottom: 1rem;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* Site Header */
.pwn-site-header {
  background-color: #f8f9fa;
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid #e0ddee;
  transition: background-color 0.2s ease;
}

.pwn-site-header:hover {
  background-color: #f0f0f5;
}

/* Site Body */
.pwn-site-body {
  padding: 1.25rem;
  background-color: #fff;
  border-radius: 0 0 8px 8px; 
}

/* Subsection styling */
.pwn-subsection {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #f0f0f0;
}

.pwn-subsection:last-child {
  border-bottom: none;
}

.pwn-subsection-title {
  color: #666;
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

/* Nested item (contacts, components) */
.pwn-nested-item {
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  background-color: #fafafa;
}

/* Nested Header */
.pwn-nested-header {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 6px 6px 0 0;
  transition: background-color 0.2s ease;
}

.pwn-nested-header:hover {
  background-color: #ececec;
}

/* Nested Body */
.pwn-nested-body {
  padding: 0.75rem;
  background-color: #fff;
  border-radius: 0 0 6px 6px;
}

/* Icon wrapper that rotates */
.pwn-icon-wrapper {
  display: inline-block;
  margin-right: 0.5rem;
  transition: transform 0.2s ease;
  width: 14px;
  text-align: center;
}

.pwn-icon-wrapper.expanded {
  transform: rotate(90deg);
}

.pwn-icon-wrapper i,
.pwn-icon-wrapper svg {
  color: #4B286D !important;
}

/* Ensure SVG path also gets the purple color */
.pwn-icon-wrapper svg path {
  fill: #4B286D !important;
}

/* Small text */
.pwn-solution-form .small,
.pwn-solution-form small {
  font-size: 0.875rem;
}

.pwn-solution-form .form-text {
  font-size: 0.8rem;
  color: #6c757d;
  margin-top: 0.25rem;
}

.pwn-solution-form .col-form-label.small {
  font-size: 0.875rem;
}

.pwn-solution-form .form-control-sm {
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
}

/* Make outline-secondary buttons more visible */
.pwn-solution-form .btn-outline-secondary {
  color: #4B286D;
  border-color: #9575cd;
  background-color: #fff;
  font-weight: 500;
}

.pwn-solution-form .btn-outline-secondary:hover {
  background-color: #f6f4fa;
  border-color: #4B286D;
  color: #4B286D;
}

/* Component section header (collapsible) */
.pwn-component-section-header {
  cursor: pointer;
  padding: 0.5rem 0;
  margin-bottom: 0.5rem;
}

.pwn-component-section-header:hover {
  background-color: #f9f9fb;
}

.email-preview {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 1.5rem;
    margin-top: 1rem;
}

.email-subject {
    padding-bottom: 1rem;
    border-bottom: 2px solid #4B286D;
    color: #4B286D;
    font-size: 1.05rem;
    margin-bottom: 1rem;
}

.email-body {
    color: #333;
    line-height: 1.6;
}

.email-body h6 {
    color: #4B286D;
    font-weight: 600;
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
}

.email-body ul {
    margin-left: 1.25rem;
    margin-bottom: 1rem;
}

.email-body ul ul {
    margin-left: 1.5rem;
    list-style-type: circle;
}

.email-body a {
    color: #4B286D;
    text-decoration: underline;
}

.email-body a:hover {
    color: #3d205d;
}

/* Disabled state for PWN pills */
.pwn-pill.disabled {
    opacity: 0.65;
    cursor: not-allowed !important;
    pointer-events: none;
    background-color: #f8f9fa !important;
}

.pwn-pill.disabled .pwn-checkbox {
    opacity: 0.65;
}

.pwn-pill.disabled {
    color: #6c757d !important;
}

.pwn-pill.disabled.active {
    background-color: #e7e7ff !important;
    border-color: #b8b8d8 !important;
    color: #5a5a7d !important;
}

/* Slim drop strip under the floor plan table - visible affordance for drag & drop without the
   full-height dashed box, which would sit oddly next to the document table */
.pico-femto-droparea {
    border: 2px dashed #b8b8d8;
    border-radius: 6px;
    background: #fafafa;
    padding: 1.25rem 0.75rem;
    text-align: center;
    font-size: 0.9rem;
    color: #666;
    cursor: pointer;
}

.pico-femto-droparea:hover {
    border-color: #4b286d;
    background: #f7f4fa;
}

.pico-femto-droparea-cta {
    color: #4b286d;
    font-weight: 600;
}

/* Feedback while a floor plan is dragged over the upload panel */
.pico-femto-dragover {
    outline: 2px dashed #4b286d;
    outline-offset: 4px;
    background: #f7f4fa;
}

/* ========== PICO AND FEMTO QUALIFICATION CHECKLIST ========== */
/* Reuses the pwn-site-card / header / body accordion; only the pieces the
   Enhanced Coverage sites have no equivalent for are defined here. */

/* "n of 6 confirmed" sits left, the bar fills the rest of the row */
.pico-femto-progress-label {
    flex: 0 0 auto;
    white-space: nowrap;
    margin-right: 0.75rem;
}

.pico-femto-progress {
    flex: 1 1 auto;
    height: 6px;
}

/* Numbered badge on each checklist item: purple per the design, green once confirmed. The colour
   change is what shows which items are done while they are all collapsed, since the checkbox
   only appears in the expanded body. */
.pico-femto-checklist-number {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #4b286d;
    color: #fff;
    font-size: 11px;
    line-height: 22px;
    text-align: center;
    margin-right: 8px;
}

.pico-femto-checklist-number.confirmed {
    background: #2b8000;
}

.pico-femto-checklist-subtitle {
    margin-left: 52px;
}

.pico-femto-checklist-sections {
    padding-left: 18px;
    margin-bottom: 0;
}

/* Confirmation row at the foot of each checklist item. The box stays a neutral outline until
   ticked and turns TELUS purple when checked, so an unticked item never looks confirmed.
   accent-color is ignored by browsers that don't support it, leaving the native checkbox. */
.pico-femto-checklist-confirm {
    border-top: 1px solid #e9ecef;
    padding-top: 0.625rem;
}

.pico-femto-checklist-confirm .form-check-input {
    accent-color: #4b286d;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: middle;
}

.pico-femto-checklist-confirm .form-check-label {
    font-weight: 600;
    cursor: pointer;
}

/* Item 6 closes with a warning the customer has to agree to */
.pico-femto-checklist-warning {
    background: #fdf6e7;
    border-left: 3px solid #e8a33d;
    padding: 0.625rem 0.75rem;
}

.pico-femto-checklist-sections code,
.pico-femto-checklist-warning code {
    background: #eceeef;
    border-radius: 3px;
    padding: 1px 4px;
    color: #2a2c2e;
}