/* ============================================================
   ROB'S INDUSTRIAL — CONFIGURATOR STYLES
   It is namespaced under #ris-camlock (and future builders use
   their own IDs), so it cannot affect any other part of the site.
   Location: BC Admin -> Storefront -> My Themes -> [your theme]
             -> Edit Theme Files -> custom.css
   ============================================================ */

/* All rules scoped under #ris-camlock — nothing leaks into the theme */
  #ris-camlock {
    --ric-blue:       #6FA8DC;
    --ric-blue-deep:  #3D85C6;
    --ric-link:       #0000FF;
    --ric-green-dark: #1E5128;
    --ric-green-cta:  #6AA84F;
    --ric-orange:     #FF9900;
    --ric-bg:         #F0EFEE;
    --ric-charcoal:   #202020;
    --ric-gray:       #666666;
    --ric-border:     #DDDDDD;
    --ric-input-bg:   #F8F8F8;
    /* Wire colour palette */
    --ric-brown:  #7B3F00;
    --ric-orange-wire: #CC5500;
    --ric-yellow: #B8A000;
    --ric-green:  #2E7D32;
    --ric-red:    #C62828;
    --ric-blue-wire: #1565C0;
    --ric-white:  #9E9E9E;
    font-family: "PT Sans", Arial, sans-serif;
    font-size: 15px;
    color: var(--ric-charcoal);
    line-height: 1.5;
    box-sizing: border-box;
  }
  #ris-camlock *, #ris-camlock *::before, #ris-camlock *::after { box-sizing: border-box; margin: 0; padding: 0; }

  #ris-camlock .ric-page-title { font-family: Cabin, Arial, sans-serif; font-weight: 500; font-size: 26px; color: var(--ric-charcoal); margin-bottom: 4px; }
  #ris-camlock .ric-page-sub   { font-size: 14px; color: var(--ric-gray); margin-bottom: 18px; }

  /* Two-column layout */
  #ris-camlock .ric-grid { display: grid; grid-template-columns: 1fr 420px; gap: 20px; align-items: start; }

  /* Blue section-header bars — matches BC theme sidebar */
  #ris-camlock .ric-bar { background: var(--ric-blue); color: #fff; font-family: Cabin, Arial, sans-serif; font-weight: 500; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; padding: 8px 14px; }

  /* Panels */
  #ris-camlock .ric-panel { background: #fff; border: 1px solid var(--ric-border); margin-bottom: 20px; }
  #ris-camlock .ric-panel:last-child { margin-bottom: 0; }
  #ris-camlock .ric-panel-body { padding: 16px; }

  /* ── Diagram ── */
  #ris-camlock .ric-diagram-wrap { padding: 12px 16px 4px; }
  #ris-camlock .ric-diagram { width: 100%; height: auto; display: block; }

  /* Wire colour swatch legend */
  #ris-camlock .ric-wire-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 10px 16px 14px; }
  #ris-camlock .ric-swatch { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ric-gray); }
  #ris-camlock .ric-swatch-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); flex-shrink: 0; }

  /* Summary spec grid */
  #ris-camlock .ric-specs { display: grid; grid-template-columns: 1fr 1fr 1fr; }
  #ris-camlock .ric-spec { padding: 11px 14px; border-right: 1px solid var(--ric-border); border-bottom: 1px solid var(--ric-border); }
  #ris-camlock .ric-spec:nth-child(3n)      { border-right: none; }
  #ris-camlock .ric-spec:nth-last-child(-n+3) { border-bottom: none; }
  #ris-camlock .ric-spec-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ric-gray); margin-bottom: 2px; }
  #ris-camlock .ric-spec-value { font-size: 14px; font-weight: 700; color: var(--ric-charcoal); }
  #ris-camlock .ric-spec-value.empty { color: #BBBBBB; font-weight: 400; }

  /* Tabs */
  #ris-camlock .ric-tab-nav { display: flex; border-bottom: 1px solid var(--ric-border); background: var(--ric-bg); }
  #ris-camlock .ric-tab-btn { flex: 1; padding: 9px 8px; font-family: "PT Sans", Arial, sans-serif; font-size: 13px; font-weight: 700; background: none; border: none; border-right: 1px solid var(--ric-border); cursor: pointer; color: var(--ric-gray); }
  #ris-camlock .ric-tab-btn:last-child { border-right: none; }
  #ris-camlock .ric-tab-btn.active { background: #fff; color: var(--ric-charcoal); border-bottom: 2px solid var(--ric-blue-deep); margin-bottom: -1px; }
  #ris-camlock .ric-tab-content { display: none; padding: 16px; }
  #ris-camlock .ric-tab-content.active { display: block; }
  #ris-camlock .ric-tab-content p  { font-size: 14px; color: #444; margin-bottom: 10px; }
  #ris-camlock .ric-tab-content ul { list-style: disc; padding-left: 20px; }
  #ris-camlock .ric-tab-content li { font-size: 14px; color: #444; margin-bottom: 4px; }

  /* ── Config panel (right column) ── */
  #ris-camlock .ric-config-inner { padding: 16px; display: flex; flex-direction: column; gap: 16px; }

  #ris-camlock .ric-step-label { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ric-gray); margin-bottom: 6px; display: flex; justify-content: space-between; align-items: baseline; }
  #ris-camlock .ric-step-label .req { font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: 0; color: #AAAAAA; }

  /* Pills */
  #ris-camlock .ric-pills { display: flex; flex-wrap: wrap; gap: 6px; }
  #ris-camlock .ric-pill { font-family: "PT Sans", Arial, sans-serif; font-size: 13px; font-weight: 700; padding: 7px 12px; background: var(--ric-input-bg); border: 1px solid var(--ric-border); color: var(--ric-charcoal); cursor: pointer; }
  #ris-camlock .ric-pill:hover  { border-color: var(--ric-blue-deep); color: var(--ric-blue-deep); }
  #ris-camlock .ric-pill.active { background: var(--ric-blue-deep); border-color: var(--ric-blue-deep); color: #fff; }

  /* Selects */
  #ris-camlock select.ric-sel {
    appearance: none; -webkit-appearance: none; width: 100%;
    padding: 9px 32px 9px 10px; font-family: "PT Sans", Arial, sans-serif; font-size: 14px;
    color: var(--ric-charcoal); background-color: var(--ric-input-bg);
    border: 1px solid var(--ric-border); border-radius: 0; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
  }
  #ris-camlock select.ric-sel:focus   { outline: 2px solid var(--ric-blue); outline-offset: -1px; background-color: #fff; }
  #ris-camlock select.ric-sel.done    { background-color: #fff; border-color: var(--ric-blue); }
  #ris-camlock select.ric-sel:disabled { cursor: not-allowed; color: #AAAAAA; }

  /* End-type cards — the "independent end selection" Shawn requested */
  /* End-config dropdown uses the standard .ric-sel styling */

  /* Note box for the #1 AWG exception */
  #ris-camlock .ric-note { background: #FFF8E1; border: 1px solid #F2D9A6; padding: 10px 12px; font-size: 13px; color: #7A5000; display: none; }
  #ris-camlock .ric-note.show { display: block; }
  #ris-camlock .ric-note strong { font-weight: 700; }

  /* Price row */
  #ris-camlock .ric-price-row { background: var(--ric-bg); border: 1px solid var(--ric-border); padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  #ris-camlock .ric-price-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ric-gray); }
  #ris-camlock .ric-price { font-size: 24px; font-weight: 700; color: var(--ric-link); line-height: 1.2; }
  #ris-camlock .ric-price.placeholder { font-size: 14px; font-weight: 400; color: #AAAAAA; }
  #ris-camlock .ric-price.call        { font-size: 16px; color: var(--ric-green-dark); }
  #ris-camlock .ric-badge { font-size: 11px; font-weight: 700; padding: 3px 9px; white-space: nowrap; }
  #ris-camlock .ric-badge.stock  { background: #EAF3E6; color: var(--ric-green-dark); border: 1px solid #C8DFBF; }
  #ris-camlock .ric-badge.custom { background: #FFF3DD; color: #8A5A00; border: 1px solid #F2D9A6; }

  /* SKU row */
  #ris-camlock .ric-sku-row   { border: 1px solid var(--ric-border); padding: 9px 14px; display: flex; align-items: center; gap: 8px; font-size: 13px; }
  #ris-camlock .ric-sku-label { font-weight: 700; color: var(--ric-gray); text-transform: uppercase; font-size: 11px; letter-spacing: .05em; }
  #ris-camlock .ric-sku-value { font-weight: 700; color: var(--ric-charcoal); flex: 1; }
  #ris-camlock .ric-sku-value.placeholder { font-weight: 400; color: #BBBBBB; }
  #ris-camlock .ric-copy { font-family: "PT Sans", Arial, sans-serif; font-size: 12px; background: var(--ric-input-bg); border: 1px solid var(--ric-border); padding: 3px 9px; cursor: pointer; color: var(--ric-gray); }
  #ris-camlock .ric-copy:hover { background: #ECECEC; }

  /* CTA buttons */
  #ris-camlock .ric-atc { width: 100%; padding: 12px; font-family: "PT Sans", Arial, sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border: none; border-radius: 3px; cursor: pointer; background: var(--ric-green-cta); color: #fff; }
  #ris-camlock .ric-atc:hover:not(:disabled) { background: #5C9643; }
  #ris-camlock .ric-atc:disabled { background: #DDDDDD; color: #999; cursor: not-allowed; }
  #ris-camlock .ric-atc.quote   { background: #fff; color: var(--ric-green-dark); border: 2px solid var(--ric-green-dark); }
  #ris-camlock .ric-atc.quote:hover { background: #EAF3E6; }
  #ris-camlock .ric-lead { font-size: 12px; color: var(--ric-gray); text-align: center; }

  /* Quote panel */
  #ris-camlock .ric-quote-panel { background: var(--ric-green-dark); border-radius: 4px; padding: 12px 14px; }
  #ris-camlock .ric-quote-title { color: #fff; font-size: 13px; font-weight: 700; margin-bottom: 9px; }
  #ris-camlock .ric-quote-btns  { display: flex; gap: 8px; flex-wrap: wrap; }
  #ris-camlock .ric-quote-btn   { display: inline-block; background: #fff; color: var(--ric-charcoal); font-family: "PT Sans", Arial, sans-serif; font-size: 13px; font-weight: 700; padding: 8px 14px; border: none; border-radius: 3px; cursor: pointer; text-decoration: none; }
  #ris-camlock .ric-quote-btn:hover { background: #EFEFEF; }

  /* Toast */
  #ris-camlock .ric-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--ric-charcoal); color: #fff; padding: 10px 18px; font-size: 13px; transition: transform .25s; z-index: 9999; border-radius: 3px; }
  #ris-camlock .ric-toast.show { transform: translateX(-50%) translateY(0); }

  /* Responsive */
  @media (max-width: 840px) {
    #ris-camlock .ric-grid { grid-template-columns: 1fr; }
    #ris-camlock .ric-specs { grid-template-columns: 1fr 1fr; }
    #ris-camlock .ric-spec:nth-child(3n)        { border-right: 1px solid var(--ric-border); }
    #ris-camlock .ric-spec:nth-child(2n)        { border-right: none; }
    #ris-camlock .ric-spec:nth-last-child(-n+3) { border-bottom: 1px solid var(--ric-border); }
    #ris-camlock .ric-spec:nth-last-child(-n+2) { border-bottom: none; }
  }