/* =========================
   PDTP Frontend Form — Porter public site alignment
   (lime CTA #9DCD3B, forest #004225, page #F9FAF9)
   ========================= */

:root{
  --pdtp-lime: #9DCD3B;
  --pdtp-forest: #004225;
  --pdtp-text: #1A1A1A;
  --pdtp-body: #4a5568;
  --pdtp-muted: #5c6670;
  --pdtp-muted-green: #4d5c54;

  --pdtp-tag-bg: #E8F3D6;
  --pdtp-tag-text: var(--pdtp-forest);

  /* Primary actions = homepage “Post a task” (lime + dark label) */
  --pdtp-primary: var(--pdtp-lime);
  --pdtp-primary-2: var(--pdtp-forest);
  --pdtp-focus: rgba(157, 205, 59, 0.45);
  /* Segmented controls (Essential / All) — medium green, not CTA */
  --pdtp-control-active-bg: #ecfdf5;
  --pdtp-control-active-border: #a7f3d0;
  --pdtp-control-idle-bg: #f1f5f9;
  --pdtp-control-text: #0f172a;

  --pdtp-border: #e5eae5;
  --pdtp-border-2: #dce0dc;

  --pdtp-bg: #ffffff;
  --pdtp-bg-page: #F9FAF9;
  --pdtp-bg-soft: #f3f6f3;

  --pdtp-page-tint: rgba(157, 205, 59, 0.06);

  --pdtp-radius: 22px;
  --pdtp-radius-input: 10px;
  --pdtp-shell-pad: clamp(12px, 3vw, 28px);

  --pdtp-font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pdtp-font-heading: ui-serif, Georgia, "Liberation Serif", "Times New Roman", serif;
}

.pdtp-form-wrap,
.pdtp-form-shell,
.pdtp-form,
.pdtp-form-wrap form{
  font-family: var(--pdtp-font-ui);
  color: var(--pdtp-body);
}

/* Page-level — homepage off-white canvas */
.pdtp-form-shell{
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--pdtp-shell-pad);
  background: var(--pdtp-bg-page);
}

.pdtp-form-wrap{
  max-width: 980px;
  margin: 0 auto 28px;
  padding: 0;
}

.pdtp-form-wrap.pdtp-form-outer{
  max-width: 1180px;
  margin: 0 auto 32px;
  padding: 0;
}

/* Subtle tint around form area without touching whole site */
.pdtp-form-wrap::before{
  content:"";
  display:block;
  height: 1px;
}

/* Form card — white on soft page, minimal shadow (homepage: flat + calm) */
.pdtp-form,
.pdtp-form-wrap form{
  background: var(--pdtp-bg);
  border: 1px solid var(--pdtp-border);
  border-radius: var(--pdtp-radius);
  padding: clamp(20px, 2.4vw, 32px);
  box-shadow: 0 1px 3px rgba(0, 34, 37, 0.04);
}

@media (min-width: 900px){
  .pdtp-form,
  .pdtp-form-wrap form{
    box-shadow:
      0 1px 3px rgba(0, 34, 37, 0.04),
      0 0 0 1px rgba(157, 205, 59, 0.08);
  }
}

/* Heading */
.pdtp-form h2,
.pdtp-form-wrap h2{
  margin: 0 0 14px;
  font-family: var(--pdtp-font-heading);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--pdtp-text);
}

/* Labels */
.pdtp-form label,
.pdtp-form-wrap label{
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: var(--pdtp-text);
  margin: 12px 0 6px;
}

/* Inputs/select/textarea */
.pdtp-form input[type="text"],
.pdtp-form input[type="email"],
.pdtp-form input[type="number"],
.pdtp-form input[type="tel"],
.pdtp-form input[type="date"],
.pdtp-form input[type="time"],
.pdtp-form select,
.pdtp-form textarea,
.pdtp-form-wrap input[type="text"],
.pdtp-form-wrap input[type="email"],
.pdtp-form-wrap input[type="number"],
.pdtp-form-wrap input[type="tel"],
.pdtp-form-wrap input[type="date"],
.pdtp-form-wrap input[type="time"],
.pdtp-form-wrap select,
.pdtp-form-wrap textarea{
  width: 100%;
  border: 1px solid var(--pdtp-border-2) !important;
  border-radius: var(--pdtp-radius-input) !important;
  padding: 13px 14px !important;
  font-size: 15px !important;
  line-height: 1.4;
  background: #fff !important;
  color: var(--pdtp-text) !important;
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box;
}

/* Normalize single-line controls (aligned height; textarea overrides below) */
.pdtp-form input[type="text"],
.pdtp-form input[type="email"],
.pdtp-form input[type="number"],
.pdtp-form input[type="tel"],
.pdtp-form input[type="date"],
.pdtp-form input[type="time"],
.pdtp-form-wrap input[type="text"],
.pdtp-form-wrap input[type="email"],
.pdtp-form-wrap input[type="number"],
.pdtp-form-wrap input[type="tel"],
.pdtp-form-wrap input[type="date"],
.pdtp-form-wrap input[type="time"]{
  min-height: 48px;
}

.pdtp-form select:not([multiple]),
.pdtp-form-wrap select:not([multiple]){
  min-height: 48px;
}

/* Focus */
.pdtp-form input:focus,
.pdtp-form select:focus,
.pdtp-form textarea:focus,
.pdtp-form-wrap input:focus,
.pdtp-form-wrap select:focus,
.pdtp-form-wrap textarea:focus{
  border-color: var(--pdtp-forest) !important;
  box-shadow: 0 0 0 3px var(--pdtp-focus) !important;
}

/* Placeholder */
.pdtp-form ::placeholder,
.pdtp-form-wrap ::placeholder{
  color: #94a3b8;
}

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

/* Helper text */
.pdtp-help,
.pdtp-form .pdtp-help,
.pdtp-form-wrap .pdtp-help{
  font-size: 12px;
  color: var(--pdtp-muted);
  margin-top: 6px;
}

/* Grid (if used) */
.pdtp-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 820px){
  .pdtp-grid{ grid-template-columns: 1fr; }
}

/* Two-column row (e.g. Country + phone) — aligned field heights */
.pdtp-form .pdtp-row-2,
.pdtp-form-wrap .pdtp-row-2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  align-items: start;
}

@media (max-width: 639px){
  .pdtp-form .pdtp-row-2,
  .pdtp-form-wrap .pdtp-row-2{
    grid-template-columns: 1fr;
  }
}

/* Primary CTA — homepage lime pill, dark label (only .pdtp-btn; do not target all form buttons — AI/toggles need their own hierarchy) */
.pdtp-btn,
.pdtp-form input[type="submit"],
.pdtp-form-wrap input[type="submit"]{
  background: var(--pdtp-lime) !important;
  color: var(--pdtp-forest) !important;
  border: 1px solid var(--pdtp-forest) !important;
  border-radius: 999px !important;
  padding: 14px 22px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  cursor: pointer;
  box-shadow: none;
  letter-spacing: 0.01em;
}

.pdtp-btn:hover,
.pdtp-form input[type="submit"]:hover,
.pdtp-form-wrap input[type="submit"]:hover{
  filter: brightness(1.03);
}

.pdtp-btn:active,
.pdtp-form input[type="submit"]:active,
.pdtp-form-wrap input[type="submit"]:active{
  transform: translateY(1px);
}

/* Error / success */
.pdtp-error{
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  border-radius: 14px;
  padding: 10px 12px;
  margin: 10px 0;
}
.pdtp-success{
  background: var(--pdtp-tag-bg);
  border: 1px solid rgba(0, 66, 37, 0.15);
  color: var(--pdtp-forest);
  border-radius: var(--pdtp-radius-input);
  padding: 10px 12px;
  margin: 10px 0;
}

/* Multi-select (Tags) */
.pdtp-form select[multiple],
.pdtp-form-wrap select[multiple]{
  min-height: 140px !important;
  padding: 10px !important;
  background: #fafdfb !important;
  border-color: var(--pdtp-border-2) !important;
}

/* options readability */
.pdtp-form select[multiple] option,
.pdtp-form-wrap select[multiple] option{
  padding: 6px 8px;
  border-radius: 10px;
}

/* Single selects: chevron in forest green */
.pdtp-form select,
.pdtp-form-wrap select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(0, 66, 37, 0.88) 50%),
    linear-gradient(135deg, rgba(0, 66, 37, 0.88) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%,
    0 0;
  background-size:
    6px 6px,
    6px 6px,
    100% 100%;
  background-repeat: no-repeat;
  padding-right: 38px !important;
}

/* Main / sub-category: strong dropdown affordance */
.pdtp-select-shell{
  position: relative;
  display: block;
  border-radius: 14px;
}

.pdtp-select-shell::after{
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  pointer-events: none;
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23004225' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity: 0.95;
}

.pdtp-form select.pdtp-select--category,
.pdtp-form-wrap select.pdtp-select--category{
  min-height: 48px;
  padding: 12px 48px 12px 14px !important;
  font-size: 15px !important;
  font-weight: 600;
  letter-spacing: -0.01em;
  border-color: rgba(15, 23, 42, 0.12) !important;
  background-color: #fff !important;
  background-image: none !important;
  box-shadow: 0 1px 2px rgba(2, 6, 23, 0.04);
}

.pdtp-form select.pdtp-select--category:hover,
.pdtp-form-wrap select.pdtp-select--category:hover{
  border-color: rgba(0, 66, 37, 0.28) !important;
}

/* Multi-select: keep stable (no faux arrow) */
.pdtp-form select[multiple],
.pdtp-form-wrap select[multiple]{
  background-image: none !important;
  padding-right: 12px !important;
}

/* File input */
.pdtp-form input[type="file"],
.pdtp-form-wrap input[type="file"]{
  width: 100%;
  border: 1px dashed rgba(0, 66, 37, 0.28) !important;
  border-radius: var(--pdtp-radius-input) !important;
  padding: 12px !important;
  background: var(--pdtp-tag-bg) !important;
}

/* Actions spacing */
.pdtp-actions{
  display:flex;
  justify-content:flex-start;
  gap: 12px;
  margin-top: 14px;
}

/* Required asterisk (if theme outputs one) */
.pdtp-form .required,
.pdtp-form-wrap .required{
  color: #ef4444;
}

/* Add Task layout: main column + assistant column */
.pdtp-form-layout{
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}

.pdtp-form-layout--single{
  grid-template-columns: 1fr !important;
}

@media (min-width: 980px){
  .pdtp-form-layout:not(.pdtp-form-layout--single){
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: clamp(24px, 3vw, 40px);
  }
}

.pdtp-form-main{
  min-width: 0;
}

.pdtp-form-section{
  margin-bottom: 6px;
  padding: 0 0 18px 12px;
  border-bottom: 1px solid var(--pdtp-border);
  border-left: 3px solid transparent;
}

.pdtp-form-section:last-child{
  border-bottom: none;
  padding-bottom: 0;
}

.pdtp-form-main > .pdtp-form-section:first-of-type{
  border-left-color: rgba(157, 205, 59, 0.85);
}

.pdtp-form-section__heading{
  margin: 0 0 4px;
  font-family: var(--pdtp-font-heading);
  font-size: clamp(16px, 1.1vw, 19px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--pdtp-text);
}

.pdtp-form-section__heading--small{
  font-family: var(--pdtp-font-ui);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--pdtp-lime);
}

.pdtp-form-section__hint{
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--pdtp-muted-green);
  max-width: 42em;
}

.pdtp-form-section--compact .pdtp-form-section__heading{
  margin-top: 4px;
}

.pdtp-form-aside{
  position: relative;
}

@media (min-width: 980px){
  .pdtp-form-aside{
    position: sticky;
    top: 12px;
  }
}

.pdtp-form-actions{
  margin-top: 22px;
  padding-top: 8px;
  border-top: 1px solid var(--pdtp-border);
}

.pdtp-btn--primary{
  min-width: min(100%, 260px);
}

/* Category context — homepage tag strip */
.pdtp-form-section > .pdtp-form-section__hint.pdtp-ai-context-hint{
  margin: 0 0 14px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--pdtp-tag-text);
  background: var(--pdtp-tag-bg);
  border: 1px solid rgba(0, 66, 37, 0.12);
  border-radius: 10px;
}

.pdtp-ai-context-hint{
  margin: 12px 0 0;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--pdtp-tag-text);
  background: var(--pdtp-tag-bg);
  border: 1px solid rgba(0, 66, 37, 0.12);
  border-radius: 10px;
}

.pdtp-ai-context-hint--resolved{
  opacity: 0.5;
}

.pdtp-title-ai-mount{
  margin-top: 10px;
}

.pdtp-form-section--specifics{
  background: #fff;
  border: 1px solid var(--pdtp-border);
  border-radius: var(--pdtp-radius);
  padding: clamp(16px, 2vw, 22px);
  margin-bottom: 20px;
  border-bottom: none;
  padding-bottom: clamp(16px, 2vw, 22px);
  box-shadow: 0 1px 2px rgba(0, 34, 37, 0.04);
}

.pdtp-desc-ai-mount{
  margin-bottom: 14px;
}

/* Sub-category optional reset (soft system notice) */
.pdtp-soft-notice{
  margin: 0 0 14px;
  padding: 9px 12px;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--pdtp-tag-text);
  background: var(--pdtp-tag-bg);
  border: 1px solid rgba(0, 66, 37, 0.14);
  border-radius: 10px;
}

/* Field detail (optional vs all) — premium pill control */
.pdtp-form-section--field-detail{
  padding-bottom: 20px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--pdtp-border);
}

/* Extra breathing room before Task title (and similar) after field-detail */
.pdtp-form-section--field-detail + .pdtp-form-section{
  padding-top: 6px;
}

/* No empty gap when toggle + notice are both hidden */
.pdtp-form-section--field-detail:not(:has(#pdtpOptionalFieldsBar:not([hidden]))):not(:has(#pdtpOptionalResetNotice:not([hidden]))){
  display: none;
}

.pdtp-form-section--field-detail .pdtp-soft-notice{
  margin-top: 10px;
}

.pdtp-optional-fields-bar{
  margin: 0;
}

.pdtp-field-detail{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(14px, 2vw, 22px);
  padding: 14px clamp(14px, 2vw, 22px);
  background: #fff;
  border: 1px solid var(--pdtp-border);
  border-radius: var(--pdtp-radius);
  box-shadow: 0 1px 3px rgba(0, 34, 37, 0.05);
}

.pdtp-field-detail__left{
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 220px;
  min-width: 0;
}

.pdtp-field-detail__icon-wrap{
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pdtp-tag-bg);
  color: var(--pdtp-forest);
}

.pdtp-field-detail__eye-svg{
  display: block;
}

.pdtp-field-detail__copy{
  min-width: 0;
}

.pdtp-field-detail__title{
  margin: 0;
  font-family: var(--pdtp-font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--pdtp-text);
  line-height: 1.25;
}

.pdtp-field-detail__subtitle{
  margin: 3px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--pdtp-muted);
  line-height: 1.35;
}

.pdtp-field-detail__right{
  flex: 1 1 260px;
  min-width: min(100%, 260px);
}

.pdtp-field-detail__track{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 5px;
  border-radius: 999px;
  background: var(--pdtp-control-idle-bg);
  border: 1px solid #e2e8f0;
}

.pdtp-field-detail__seg{
  appearance: none;
  margin: 0;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  padding: 10px 12px;
  min-height: 46px;
  transition:
    background 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.1s ease;
}

.pdtp-field-detail__seg-inner{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.pdtp-field-detail__seg-icon{
  flex-shrink: 0;
  display: block;
}

.pdtp-field-detail__seg-label{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.pdtp-field-detail__seg--idle{
  background: var(--pdtp-control-idle-bg);
  color: #64748b;
  border: 1px solid transparent;
  box-shadow: none;
}

.pdtp-field-detail__seg--idle .pdtp-field-detail__seg-icon{
  color: #64748b;
  opacity: 1;
}

.pdtp-field-detail__seg--idle:hover{
  background: #e2e8f0;
  color: #475569;
}

/* Selected — medium green tint, clear vs idle (not CTA fill) */
.pdtp-field-detail__seg--active{
  background: var(--pdtp-control-active-bg);
  color: var(--pdtp-control-text);
  border: 1px solid var(--pdtp-control-active-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.pdtp-field-detail__seg--active .pdtp-field-detail__seg-label{
  color: #15803d;
  font-weight: 800;
}

.pdtp-field-detail__seg--active .pdtp-field-detail__seg-icon{
  color: #15803d;
}

.pdtp-field-detail__seg:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.35);
}

.pdtp-field-detail__seg--active:focus-visible{
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.4);
}

@media (max-width: 639px){
  .pdtp-field-detail{
    flex-direction: column;
    align-items: stretch;
    border-radius: 18px;
    padding: 14px;
  }

  .pdtp-field-detail__left{
    flex: none;
  }

  .pdtp-field-detail__right{
    flex: none;
    min-width: 0;
    width: 100%;
  }

  .pdtp-field-detail__track{
    grid-template-columns: 1fr 1fr;
  }

  .pdtp-field-detail__seg{
    min-height: 50px;
    padding: 12px 10px;
  }

  .pdtp-field-detail__seg-label{
    font-size: 12px;
  }
}

/* Mobile-first: guided flow */
@media (max-width: 639px){
  .pdtp-form-shell{
    padding: 12px 10px 20px;
  }

  .pdtp-form-section{
    padding-left: 10px;
  }

  .pdtp-form-actions{
    padding-top: 16px;
  }

  .pdtp-btn--primary{
    width: 100%;
    min-height: 52px;
    border-radius: 999px !important;
    font-size: 15px !important;
  }
}