/*
Theme Name: StarShine
Theme URI: https://adamyuan.com/
Description: AY Solutions for StarShine Only.
Author: A.Y.
Author URI: https://adamyuan.com/
Template: hello-elementor
Version: 1.3.0
Text Domain: hello-elementor-child
*/

/* =========================================================
   Starshine RFQ Form - Final Working CSS
   Only adjusted:
   1) Purpose text color
   2) Browse Files text color
   3) Submit top spacing
   Everything else kept the same
   ========================================================= */

   .ss-rfq-form {
    --ss-primary: #EF6F24;
    --ss-accent: #EF6F24;
    --ss-text: #1F2937;
    --ss-placeholder: #A2ACBB;
    --ss-muted: #7A8596;
    --ss-border: #D7DEE8;
    --ss-bg: #FFFFFF;
    --ss-radius: 2px;
    --ss-gap-x: 12px;
    --ss-gap-y: 8px;
    --ss-field-h: 42px;
    --ss-font-size: 15px;
  
    width: 100%;
    color: var(--ss-text);
    font-family: inherit;
  }
  
  .ss-rfq-form *,
  .ss-rfq-form *::before,
  .ss-rfq-form *::after {
    box-sizing: border-box;
  }
  
  .ss-rfq-form p {
    margin: 0;
  }
  
  .ss-rfq-form .ss-rfq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--ss-gap-x);
    row-gap: var(--ss-gap-y);
    margin-bottom: var(--ss-gap-y);
  }
  
  .ss-rfq-form .ss-rfq-item {
    margin: 0 0 var(--ss-gap-y);
  }
  
  .ss-rfq-form .ss-rfq-full {
    width: 100%;
  }
  
  .ss-rfq-form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
  }
  
  .ss-rfq-form input[type="text"],
  .ss-rfq-form input[type="email"],
  .ss-rfq-form input[type="tel"],
  .ss-rfq-form select,
  .ss-rfq-form textarea {
    width: 100%;
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius);
    background: var(--ss-bg);
    color: var(--ss-text);
    font-family: inherit;
    font-size: var(--ss-font-size);
    font-weight: 400;
    line-height: 1.35;
    box-shadow: none;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease, transform .18s ease;
  }
  
  .ss-rfq-form input[type="text"],
  .ss-rfq-form input[type="email"],
  .ss-rfq-form input[type="tel"],
  .ss-rfq-form select {
    height: var(--ss-field-h);
    padding: 0 14px;
  }
  
  .ss-rfq-form textarea {
    min-height: 96px;
    max-height: 120px;
    padding: 12px 14px;
    resize: vertical;
    line-height: 1.45;
  }
  
  .ss-rfq-form input::placeholder,
  .ss-rfq-form textarea::placeholder {
    color: var(--ss-placeholder);
    opacity: 1;
  }
  
  /* select */
  .ss-rfq-form select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 38px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5.5 7.5L10 12L14.5 7.5' stroke='%236A7385' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
  }
  
  /* Purpose 默认显示色改成和 Name* 一样，选中后变为正常输入文字色 */
  .ss-rfq-form select[name="your-purpose"] {
    color: var(--ss-placeholder) !important;
  }
  
  .ss-rfq-form select[name="your-purpose"]:valid {
    color: var(--ss-text) !important;
  }
  
  /* 下拉项本身保持正常深色，避免选项列表也变灰 */
  .ss-rfq-form select[name="your-purpose"] option {
    color: var(--ss-text);
  }
  
  .ss-rfq-form input[type="text"]:focus,
  .ss-rfq-form input[type="email"]:focus,
  .ss-rfq-form input[type="tel"]:focus,
  .ss-rfq-form select:focus,
  .ss-rfq-form textarea:focus {
    border-color: var(--ss-primary);
    box-shadow: 0 0 0 2px rgba(15, 39, 71, 0.06);
  }
  
  /* submit */
  .ss-rfq-form .ss-rfq-submit,
  .ss-rfq-form input[type="submit"],
  .ss-rfq-form .wpcf7-submit {
    width: 100%;
    min-height: 46px;
    border: none;
    border-radius: var(--ss-radius);
    background: var(--ss-primary);
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .18s ease, transform .18s ease;
    margin-top: 20px;
  }
  
  .ss-rfq-form .ss-rfq-submit:hover,
  .ss-rfq-form input[type="submit"]:hover,
  .ss-rfq-form .wpcf7-submit:hover {
    background: var(--ss-accent);
    transform: scale(0.985);
  }
  
  .ss-rfq-form .ss-rfq-help {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--ss-muted);
  }
  
  .ss-rfq-form .ss-rfq-note {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--ss-muted);
  }
  
  .ss-rfq-form .wpcf7-not-valid-tip {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.35;
  }
  
  .ss-rfq-form .wpcf7-response-output {
    margin: 8px 0 0 !important;
    padding: 10px 12px !important;
    font-size: 13px;
    line-height: 1.4;
    border-radius: 2px;
  }
  
  /* =========================================================
     mfile / codedropz uploader
     ========================================================= */
  
  .ss-rfq-form .ss-rfq-upload-wrap {
    margin-bottom: 8px;
  }
  
  .ss-rfq-form .codedropz-upload-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  
  .ss-rfq-form .codedropz-upload-wrapper + .codedropz-upload-wrapper {
    display: none !important;
  }
  
  .ss-rfq-form .codedropz-upload-handler {
    position: relative !important;
    width: 100% !important;
    min-height: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid var(--ss-border) !important;
    border-radius: var(--ss-radius) !important;
    background: #fff !important;
    box-shadow: none !important;
  
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    overflow: hidden !important;
    transition: border-color .18s ease, box-shadow .18s ease !important;
  
    font-size: 0 !important;
    line-height: 0 !important;
  }
  
  .ss-rfq-form .codedropz-upload-handler:hover {
    border-color: var(--ss-primary) !important;
  }
  
  /* 只隐藏拖拽区杂内容 */
  .ss-rfq-form .codedropz-upload-handler h3,
  .ss-rfq-form .codedropz-upload-handler small,
  .ss-rfq-form .codedropz-upload-handler br,
  .ss-rfq-form .codedropz-upload-handler .dnd-upload-counter,
  .ss-rfq-form .codedropz-upload-handler .separator,
  .ss-rfq-form .codedropz-upload-handler img,
  .ss-rfq-form .codedropz-upload-handler svg {
    display: none !important;
  }
  
  /* Browse Files 改成和用户输入文本一致的颜色 */
  .ss-rfq-form .codedropz-upload-handler a,
  .ss-rfq-form .codedropz-upload-handler .cd-upload-btn,
  .ss-rfq-form .codedropz-upload-handler .codedropz-btn-wrap,
  .ss-rfq-form .codedropz-upload-handler .codedropz-btn-wrap a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: var(--ss-text) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }
  
  /* 某些版本按钮文字在 span 里 */
  .ss-rfq-form .codedropz-upload-handler a span,
  .ss-rfq-form .codedropz-upload-handler .cd-upload-btn span {
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: var(--ss-text) !important;
  }
  
  /* 上传完成后的文件状态 */
  .ss-rfq-form .dnd-upload-status,
  .ss-rfq-form .dnd-upload-details,
  .ss-rfq-form .mfcf7-zl-file-list,
  .ss-rfq-form .mfcf7_zl_file_list {
    margin-top: 6px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    color: var(--ss-muted) !important;
  }
  
  /* popup 内保持紧凑 */
  .elementor-popup-modal .ss-rfq-form {
    --ss-gap-x: 12px;
    --ss-gap-y: 8px;
    --ss-field-h: 42px;
    --ss-font-size: 15px;
  }
  
  @media (max-width: 767px) {
    .ss-rfq-form .ss-rfq-grid {
      grid-template-columns: 1fr;
      column-gap: 0;
      row-gap: 8px;
    }
  
    .ss-rfq-form {
      --ss-gap-y: 8px;
      --ss-field-h: 42px;
      --ss-font-size: 15px;
    }
  
    .ss-rfq-form textarea {
      min-height: 92px;
    }
  }