@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root{
    --purple-header:#8d7fa1;
    --purple-dark:#4a3a60;
    --purple-dark-hover:#5c4a76;
    --purple-mid:#7c6a94;
    --badge-border:#c3b3d6;
    --badge-bg:#f2eef7;
    --badge-text:#7c6a94;
    --row-alt-bg:#f7f6f9;
    --row-bg:#ffffff;
    --border-color:#e6e1ec;
    --text-primary:#3a3540;
    --text-secondary:#7a7580;
    --disabled-bg:#e6e3e8;
    --disabled-text:#a8a3ad;
    --radius:12px;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }

  .voyage_wrap{ max-width:1322px; width: 100%; margin:0 auto; }

  .page-title{ font-size:20px; font-weight:700; margin-bottom:6px; }
  .page-subtitle{ font-size:14px; color:var(--text-secondary); margin-bottom:20px; }
  .mobile-hint{ display:none; font-size:13px; color:var(--purple-mid); margin-bottom:14px; }

  .price-table{
    background:var(--row-bg);
    border-radius:var(--radius);
    overflow:hidden;
    border:1px solid var(--border-color);
    box-shadow:0 6px 24px rgba(74,58,96,0.08);
  }

  /* ===== shared grid template (desktop) ===== */
  .table-header,
  .table-row{
    display:grid;
    grid-template-columns: minmax(240px,1.5fr) repeat(4, minmax(90px,1fr)) 118px auto;
    align-items:center;
    min-height:68px;
    font-size: 18px;
  }

  .table-header{
    background:var(--purple-header);
    color:#fff;
  }

  .header-cell{
    padding:16px 20px;
    font-size:18px;
    font-weight:700;
    text-align:center;
  }
  .header-cell.cabin-header{
    text-align:left;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .header-cell.divider{  }

  .table-body .table-row{
    border-bottom:1px solid var(--border-color);
  }
  .table-body .table-row:last-child{ border-bottom:none; }
  .table-body .table-row:nth-child(even){ background:var(--row-alt-bg); }

  /* desktop: header/body wrappers pass their children straight into the row grid */
  .row-header{ display:contents; }
  .row-body{ display:contents; }
  .action-cell{ display:contents; }

  .cabin-info{
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 20px;
  }

  .cabin-badge{
    display:inline-block;
    min-width:44px;
    text-align:center;
    padding:4px 8px;
    font-size:16px;
    font-weight:700;
    letter-spacing:.3px;
    color:var(--badge-text);
    background:var(--badge-bg);
    border-radius:6px;
    flex-shrink:0;
  }

  .cabin-name{ font-size:18px; font-weight:700; }

  .chevron{
    display:none;
    color:var(--purple-mid);
    flex-shrink:0;
    transition:transform .25s ease;
  }

  .price-cell{
    padding:16px 14px;
    text-align:center;
    font-size:20px;
    font-weight:500;
    font-family: "Open Sans", sans-serif
  }
  .price-cell .price-value.dash{ color:var(--text-secondary); font-weight:400; }
  .price-cell.divider{ border-left:1px }
  .price-label{ display:none; }

  .btn{
    justify-self:center;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:10px 18px;
    border-radius:8px;
    font-size:18px;
    font-weight:700;
    border:none;
    cursor:pointer;
    white-space:nowrap;
    transition:all .18s ease;
    font-family:inherit;
    min-width: 120px;
  }
  .btn-outline{
    background:#fff;
    border:1.5px solid var(--purple-mid);
    color:var(--purple-mid);
  }
  .btn-outline.divider{ margin-left:0; }
  .btn-outline:hover{ background:var(--badge-bg); }

  .btn-filled{
    background:var(--purple-dark);
    background: linear-gradient(180deg,rgba(100, 78, 123, 1) 0%, rgba(148, 132, 163, 1) 100%);
    color:#fff;
  }
  .btn-filled:hover{
    background:var(--purple-dark-hover);
    background: linear-gradient(0deg,rgba(100, 78, 123, 1) 0%, rgba(148, 132, 163, 1) 100%);
  }

    .btn-filled svg{ width: 20px; height: 20px;}


  .btn-disabled{
    background:var(--disabled-bg);
    color:var(--disabled-text);
    cursor:not-allowed;
  }

  /* toast (demo feedback for 試算 / 報名 buttons) */
  .toast{
    position:fixed;
    left:50%;
    bottom:28px;
    transform:translateX(-50%) translateY(16px);
    background:var(--purple-dark);
    color:#fff;
    padding:12px 22px;
    border-radius:8px;
    font-size:14px;
    box-shadow:0 10px 26px rgba(0,0,0,.18);
    opacity:0;
    pointer-events:none;
    transition:all .28s ease;
    z-index:999;
    white-space:nowrap;
  }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

  /* ===================================================== */
  /* Mobile / RWD  —  below 1200px                         */
  /* Only cabin name is shown; tap to expand price/buttons */
  /* ===================================================== */
  @media (max-width: 1570px){
      .voyage_wrap{padding: 0 60px;}
    }
  @media (max-width: 1199px){

    .mobile-hint{ display:block; }

    .table-header{ display:none; }

    .table-row{
      display:block;
    }

    .row-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:16px 20px;
      cursor:pointer;
      user-select:none;
    }
    .row-header:focus-visible{
      outline:2px solid var(--purple-mid);
      outline-offset:-2px;
    }

    .chevron{ display:flex; }
    .table-row.expanded .chevron{ transform:rotate(180deg); }

    .row-body{
      display:none;
      padding:0 20px 18px;
    }
    .table-row.expanded .row-body{ display:block; }

    .action-cell{
      display:flex;
      gap:12px;
      padding-top:12px;
    }

    .price-cell{
      display:flex;
      align-items:center;
      justify-content:space-between;
      text-align:left;
      padding:10px 0;
      border-top:1px dashed var(--border-color);
      font-weight: bold;
      border-left:none !important;
    }
    .price-cell:first-of-type{ border-top:none; }

    .price-label{
      display:inline-block;
      font-size:16px;
      color:var(--text-secondary);
      font-weight:700;
      font-family: '微軟正黑體';
    }
    .price-value{ font-size:18px; }

    .btn{ flex:1; }
    .btn-outline{ border-left:1.5px solid var(--purple-mid) !important; }
    .cabin-info{ padding: 0;}
  }
  @media (max-width: 576px){
      .voyage_wrap{padding: 0;}
    }
  /* LINE consultation: only enabled on the itinerary detail price table. */
  .price-table--line-consult .table-header,
  .price-table--line-consult .table-row{
    grid-template-columns:minmax(240px,1.5fr) repeat(4,minmax(90px,1fr)) 160px;
  }

  .price-table--line-consult .action-cell .btn{
    width:130px;
    min-width:0;
    padding:10px 8px;
    border:1.5px solid transparent;
  }
  .price-table--line-consult .action-cell .btn-outline{
    border-color:var(--purple-mid);
  }
  .price-table--line-consult .btn-line{
    background:#06c755;
    color:#fff;
  }
  .price-table--line-consult .btn-line svg{min-width: 25px;}
  .price-table--line-consult .btn-line svg path{ fill: #fff;  }
  .price-table--line-consult .btn-line:hover{
    background:#04b94f;
  }
  .price-table--line-consult .action-cell .btn:focus-visible{
    outline:2px solid var(--purple-dark);
    outline-offset:2px;
  }

  @media (max-width:1199px){
    .price-table--line-consult .action-cell .btn{
      flex:1 1 0;
      width:auto;
    }
  }