/* 資料填寫專屬樣式 */
main {
  font-size: 20px;
  letter-spacing: 1px;
}

h1 {
  color: #004F74;
  font-size: 35px;
  font-weight: bold;
}

.insurance-info-container {
      max-width: 500px;
      margin: auto;
      text-align: center;
    }

    .insurance-info-container img {
      max-width: 100%;
      height: auto;
    }

    h1 {
      color: #004F74;
      font-size: 28px;
      font-weight: bold;
      text-align: center;
      margin-bottom: 20px;
    }

    label {
      display: block;
      
      margin-bottom: 5px;
      font-weight: 500;
    }

    .form-control {
      border-radius: 4px;
      border: 1px solid #ced4da;
      padding: 8px 12px;
      margin-bottom: 15px;
    }

    .btn-primary {
      background-color: #0097e0;
      border-color: #0097e0;
      padding: 12px;
      font-size: 18px;
      width: 100%;
    }

    .basicinfo label:first-child{
      width:140px;
      text-align: center;
     text-align: justify;
        text-align-last: justify;
        text-justify: inter-character;
    }
    .basicinfo input{
      vertical-align: middle;
      margin-top: 0;
      margin-bottom: 0;
      align-self: center;
    }
    .btn-primary:hover {
      background-color: #0083c3;
      border-color: #0083c3;
    }

    .option-block {
      border-radius: 15px;
      margin-bottom: 15px;

      transition: all 0.3s ease;
      overflow: hidden;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      border: none;
    }

    .option-block.active {
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    }

    .option-block.inactive {
      background-color: #D9D9D9;
    }

    .option-block.inactive .option-title {
      background-color: #D9D9D9;
    }

    .option-block.inactive .option-content {
      background-color: #D9D9D9;
    }

    .option-title {
      font-weight: bold;
      padding: 12px 15px;
      background-color: #FDD673;
      color: #333;
      text-align: center;
      padding-top: 25px;
      padding-bottom: 25px;
    }

    .option-content {
      background-color: #fdc14e;
      padding: 15px;
    }

    .form-check-label {
      cursor: pointer;
      vertical-align: middle;
      display: inline-flex;
      align-items: center;
    }
    
    /* 為「同要保人通訊地址」標籤設定垂直對齊 */
    .form-check-label[for$="SameAddress"] {
      display: inline-flex;
      align-items: center;
      height: 100%;
      margin: 0;
    }

    .form-check {
      margin-bottom: 10px;
    }
    
    /* 保費來源「其他」輸入欄位垂直對齊 */
    #otherFundSource {
      vertical-align: middle;
      margin-top: 0;
      margin-bottom: 0;
      align-self: center;
    }
    
    /* 確保所有帶標籤的輸入框容器垂直對齊 */
    .d-flex.align-items-center {
      min-height: 30px;
    }

    .form-check label {
      font-weight: 400;
      font-size: 16px;
    }

    .option-content .form-check {
      margin-top: 5px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      height: 30px;
    }

    .option-content .form-check-input {
      margin-right: 5px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 2px solid #ccc;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      vertical-align: middle;
      margin-top: 0;
      align-self: center;
    }

    .option-content .form-check-input:checked {
      background-color: #0097e0;
      border-color: #0097e0;
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
      background-position: center;
      background-repeat: no-repeat;
      background-size: 12px;
    }

    .form-control.text-left {
      max-width: 100%;

      font-size: 18px;

    }

    .insured-label {
      line-height: 1;
    }

    .main-insured {
      margin-top: 2px;
      font-size: 0.65em;
    }

    .hint-text {
      color: #F30000;
      font-size: 14px;
    }

    .top-illustration {
      max-width: 100%;
      height: auto;
      margin-bottom: 20px;
    }

    .date-inputs {
      display: flex;
      gap: 5px;
      align-items: center;
    }

    .date-inputs input {
      width: 60px;
    }

    .dropdown-group {
      display: flex;
      gap: 5px;
      margin-bottom: 10px;
      margin-top: 5px;
    }

    .dropdown-group select {
      flex: 1;
      font-size: 16px;
      border-radius: 10px;
      border: none;
      padding: 10px;
      background-color: white;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
      background-repeat: no-repeat;
      background-position: right 10px center;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .info-icon {
      color: #0097e0;
      cursor: pointer;
      margin-left: 5px;
      display: inline-block;
      width: 18px;
      height: 18px;
      line-height: 18px;
      text-align: center;
      border-radius: 50%;
      border: 1px solid #0097e0;
      font-weight: bold;
      font-size: 14px;
    }

    .address-note {
      font-size: 14px;
      color: #F30000;
      font-weight: normal;
      margin-left: 5px;
    }

    .price-note {
      font-weight: bold;
      margin-top: 10px;
      text-align: center;
      padding: 5px 0;
      color: #333;
    }

    .explanation {
      font-size: 18px;
      margin-top: 15px;
      margin-bottom: 5px;
      color: #6c757d;
    }

    .explanation2 {
      font-size: 18px;
      font-weight: bold;
      color: #6c757d;
    }

    /* 調整選項區域 */
    .insurance-options {
      margin-top: 20px;
    }

    /* 添加動畫與互動效果 */
    .option-block {
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .option-block:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .option-content {
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    /* 錯誤訊息樣式 */
    .error-message {
      font-size: 14px;
      color: #F30000;
    }

    .is-invalid {
      border-color: #F30000;
    }

    /* 自訂提示訊息樣式 */
    .custom-tooltip {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
      pointer-events: none;
    }

    /* 成功訊息樣式 */
    .alert-success {
      background-color: #d4edda;
      border-color: #c3e6cb;
      color: #155724;
      padding: 10px 15px;
      border-radius: 4px;
    }

    /* 警告訊息樣式 */
    .alert-danger {
      background-color: #f8d7da;
      border-color: #f5c6cb;
      color: #721c24;
      padding: 10px 15px;
      border-radius: 4px;
    }

    /* 點擊效果 */
    .option-block:active {
      transform: translateY(0);
    }

    #canceloption {
      cursor: pointer;
      font-size: 16px;
      text-decoration: none;
    }

    #otherFundSource {
      margin-top: -5px;
      margin-left: 15px;
    }

    select[id$="City"] {
      width: 100px;
    }

    select[id$="District"] {
      width: 100px;
    }


    .modal {
      display: flex;
      /* Use flexbox for centering */
      align-items: center;
      /* Center vertically */
      justify-content: center;
      /* Center horizontally */
      position: fixed;
      /* Stay in place */
      z-index: 1050;
      /* Sit on top */
      left: 0;
      top: 0;
      width: 100%;
      /* Full width */
      height: 100%;
      /* Full height */
      background-color: rgba(0, 0, 0, 0.4);
      /* Black w/ opacity */
    }

    .modal-content {
      background-color: #fefefe;
      padding: 20px;
      border: 1px solid #888;
      width: 500px;
      /* Default for desktop */
      height: 500px;
      /* Default for desktop */
      max-width: calc(100% - 30px);
      /* For mobile */
      max-height: calc(100% - 30px);
      /* For mobile */
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      max-height: 80vh;
      /* Limit modal height to 80% of the viewport */
      overflow-y: auto;
      /* Add vertical scroll if content overflows */
    }

    /* Prevent scrolling when modal is open */
    body.modal-open {
      overflow: hidden;
    }

    .btn:disabled
    {
      background-color: #cccccc;
      border-color: #cccccc;
      cursor: not-allowed;
    }

    .samealert {
      color: red;
      font-weight: bold;
    }