/*
CHANGE LOG
File: static/css/independent-carrier-opportunities.css
Purpose: The rules https://prohrhq.com/independent-carrier-opportunities needs beyond the CSS it reuses as-is
         (truck-stop-light.css, iplan-thesis-cards.css, small-carrier-relationships.css): the two choice accordions
         whose heading and one-line preview show while closed, and the "Which comes first?" table.
How it works: loaded only by templates/independent-carrier-opportunities.html, after the three reused files. Colors
         are the existing tokens (.tsl-page --navy, --green; site --color-green). Phone rules at 640 px and below.
Version History:
2026-10-26 v1.2 - USDOT box in .ico-own-page (label, input and button on one row; stacked on phones).
2026-10-26 v1.1 - .ico-own-page: the "Your company already has a web page" section.
2026-10-26 v1.0 - Created (Michael's work order "Independent Carrier Resource Page", Oct 26).
*/
.ico-page .ico-lead-in{ max-width:none; margin:14px 0 0; font-size:17px; color:var(--gray); }
.ico-page .thesis-hero{ margin-bottom:18px; }
.ico-page details.ico-choice{ margin:0 0 14px; }
.ico-page details.ico-choice > summary{ align-items:flex-start; justify-content:flex-start; padding:16px 18px; min-height:64px; }
.ico-page details.ico-choice > summary::after{ margin-left:auto; padding-top:4px; }
.ico-page details.ico-choice > summary:focus-visible{ outline:3px solid var(--color-gold,#b8922a); outline-offset:2px; }
.ico-page .ico-num{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; border:2px solid #dce6f2;
  display:flex; align-items:center; justify-content:center; font-size:18px; margin-top:2px; }
.ico-page .ico-sum{ display:block; }
.ico-page .ico-sum h2{ margin:0 0 4px; padding:0; border:0; color:#fff; font-size:21px; line-height:1.25; }
.ico-page .ico-prev{ display:block; font-weight:400; font-size:16px; line-height:1.4; color:#dce6f2; font-family:Georgia,"Times New Roman",serif; }
.ico-page details.ico-choice--freight > summary{ background:var(--green); }
.ico-page details.ico-choice--freight > summary:hover{ background:var(--color-green,#3F6657); }
.ico-page details.ico-choice .acc-body > .scr-svg{ margin:14px 0 18px; border-radius:6px; }
.ico-page .ico-note{ padding:10px 14px; border-left:4px solid var(--color-gold,#b8922a); background:var(--panel); }
.ico-page .ico-order{ margin:30px 0 10px; }
.ico-page .ico-order-table{ width:100%; border-collapse:collapse; margin:0 0 14px; font-size:17px; }
.ico-page .ico-order-table th, .ico-page .ico-order-table td{ padding:12px 14px; border-bottom:1px solid var(--line-soft);
  text-align:left; vertical-align:top; }
.ico-page .ico-order-table th{ width:42%; font-family:Arial,Helvetica,sans-serif; color:var(--navy); }
.ico-page .btnrow .btn{ min-height:44px; }
.ico-page .ico-own-page{ margin:30px 0 10px; padding:18px 20px; background:var(--color-bg-warm,#faf7f1); border-left:4px solid var(--color-gold,#b8922a); }
.ico-page .ico-own-page h2{ margin:0 0 8px; }
.ico-page .ico-own-page p{ max-width:none; }
.ico-page .ico-dot-form label{ display:block; margin:4px 0 6px; font-family:Arial,Helvetica,sans-serif; font-weight:700; color:var(--navy); }
.ico-page .ico-dot-row{ display:flex; gap:10px; flex-wrap:wrap; }
.ico-page .ico-dot-row input{ flex:0 1 220px; min-height:44px; padding:8px 12px; font-size:18px; border:1px solid var(--line); border-radius:6px; }
.ico-page .ico-dot-row input:focus-visible{ outline:3px solid var(--color-gold,#b8922a); outline-offset:1px; }
.ico-page .ico-dot-row .btn{ min-height:44px; cursor:pointer; }
.ico-page .ico-dot-err{ margin:8px 0 0; color:var(--color-error,#a13a3a); font-weight:600; }
.ico-page .ico-dot-more{ margin:12px 0 0; font-size:16px; }
@media (max-width:640px){
  .ico-page{ padding:16px 14px 100px; }
  .ico-page .ico-sum h2{ font-size:19px; }
  .ico-page .ico-order-table th, .ico-page .ico-order-table td{ display:block; width:auto; }
  .ico-page .ico-order-table th{ border-bottom:0; padding-bottom:2px; }
  .ico-page .ico-order-table td{ padding-top:0; }
  .ico-page .btnrow .btn{ width:100%; text-align:center; }
  .ico-page .ico-dot-row input, .ico-page .ico-dot-row .btn{ flex:1 1 100%; }
}