/*
==============================================
GARMIN お見積りページ - Modern Styles
shadcn/ui + Bootstrap風のデザイン
トップウォータータックルズ カラーリング準拠
==============================================
*/

/* ===== ベースカラー設定 (トップウォータータックルズ) ===== */
:root {
  /* Primary Colors - Navy/Blue系 */
  --primary-navy: #001f3f;
  --primary-blue: #003d7a;
  --accent-blue: #0066cc;
  
  /* Secondary Colors */
  --secondary-red: #dc2626;
  
  /* Neutral Colors (shadcn/ui準拠) */
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 3.9%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --accent: 240 4.8% 95.9%;
  --accent-foreground: 240 5.9% 10%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 221.2 83.2% 53.3%;
  --radius: 0.5rem;
  
  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
}

/* ===== ページ全体のスタイリング ===== */
.elementor-3902 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: hsl(var(--foreground));
  line-height: 1.6;
}

/* ===== メインタイトル ===== */
.elementor-element-a5e089c .elementor-heading-title {
  color: var(--primary-navy) !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  margin-bottom: var(--spacing-lg) !important;
  text-align: center;
  letter-spacing: -0.02em;
}

/* ===== カードスタイル (船舶・施工情報) ===== */
.ywraq-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  margin-bottom: var(--spacing-xl);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.ywraq-card:hover {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.ywraq-card-header {
  background: linear-gradient(to bottom, hsl(var(--muted)), hsl(var(--card)));
  padding: var(--spacing-lg) var(--spacing-xl);
  border-bottom: 1px solid hsl(var(--border));
}

.ywraq-card-title {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: var(--primary-navy) !important;
  margin: 0 0 var(--spacing-xs) 0 !important;
  letter-spacing: -0.01em;
}

.ywraq-card-description {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  margin: 0;
}

.ywraq-card-content {
  padding: var(--spacing-xl);
}

/* ===== フォームレイアウト ===== */
.marine-form-row {
  margin-bottom: var(--spacing-lg);
}

/* PC表示: 横並びレイアウト */
@media (min-width: 768px) {
  .marine-form-row {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg);
  }
  
  .marine-form-row .marine-label {
    flex: 0 0 180px;
    padding-top: 0.625rem;
    margin-bottom: 0 !important;
    text-align: right;
  }
  
  .marine-form-row .marine-input {
    flex: 1;
    max-width: 500px;
  }
}

/* ===== ラベルスタイル ===== */
.marine-label {
  display: block;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  margin-bottom: var(--spacing-xs) !important;
  color: hsl(var(--foreground)) !important;
}

.marine-label .required,
.marine-label span[style*="color: #dc2626"] {
  color: var(--secondary-red) !important;
  margin-left: 0.25rem;
}

/* ===== 入力フィールド ===== */
.marine-input,
input[type="text"].marine-input,
input[type="tel"].marine-input,
input[type="email"].marine-input,
select.marine-input,
textarea.marine-input {
  width: 100% !important;
  padding: 0.625rem 0.75rem !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  color: hsl(var(--foreground)) !important;
  background: hsl(var(--background)) !important;
  border: 1px solid hsl(var(--input)) !important;
  border-radius: var(--radius) !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
}

.marine-input:hover {
  border-color: hsl(var(--muted-foreground) / 0.3) !important;
}

.marine-input:focus {
  outline: none !important;
  border-color: var(--accent-blue) !important;
  box-shadow: 0 0 0 3px rgb(0 102 204 / 0.1) !important;
}

.marine-input::placeholder {
  color: hsl(var(--muted-foreground)) !important;
  opacity: 0.7 !important;
}

/* selectボックスの矢印 */
select.marine-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  padding-right: 2.5rem !important;
}

/* ===== 商品テーブル ===== */
.shop_table.cart {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: var(--spacing-xl);
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) + 4px);
  overflow: hidden;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}

.shop_table thead {
  background: linear-gradient(to bottom, var(--primary-navy), var(--primary-blue));
  color: white;
}

.shop_table thead th {
  padding: 1rem !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  text-align: left !important;
  border: none !important;
  color: white !important;
}

.shop_table tbody tr {
  border-bottom: 1px solid hsl(var(--border));
  transition: background-color 0.15s ease;
}

.shop_table tbody tr:hover {
  background-color: hsl(var(--muted));
}

.shop_table tbody tr:last-child {
  border-bottom: none;
}

.shop_table tbody td {
  padding: 1rem !important;
  vertical-align: middle !important;
}

.shop_table .product-remove {
  width: 50px;
  text-align: center;
}

.shop_table .product-thumbnail {
  width: 100px;
}

.shop_table .product-thumbnail img {
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
}

.shop_table .product-name a {
  color: var(--primary-navy) !important;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}

.shop_table .product-name a:hover {
  color: var(--accent-blue) !important;
}

.shop_table .product-quantity input[type="number"] {
  width: 80px !important;
  padding: 0.5rem !important;
  text-align: center;
  border: 1px solid hsl(var(--input)) !important;
  border-radius: var(--radius) !important;
  font-size: 0.875rem !important;
}

.shop_table .product-subtotal {
  font-weight: 600;
  color: var(--primary-navy);
  font-size: 1.125rem;
}

/* 削除ボタン */
.yith-ywraq-item-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground)) !important;
  text-decoration: none !important;
  font-size: 1.25rem;
  transition: all 0.15s ease;
}

.yith-ywraq-item-remove:hover {
  background: var(--secondary-red);
  color: white !important;
}

/* ===== アクションボタン (商品リストを更新) ===== */
.shop_table .actions {
  background: hsl(var(--muted));
  padding: 1.25rem !important;
}

.shop_table .actions input[type="submit"] {
  padding: 0.625rem 1.25rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--primary-navy) !important;
  background: white !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: var(--radius) !important;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.shop_table .actions input[type="submit"]:hover {
  background: hsl(var(--muted)) !important;
  border-color: var(--primary-navy) !important;
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.1);
}

/* ===== 見積もりフォーム ===== */
.yith-ywraq-mail-form-wrapper {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) + 4px);
  padding: var(--spacing-xl);
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}

#yith-ywraq-mail-form .form-row {
  margin-bottom: var(--spacing-lg) !important;
}

#yith-ywraq-mail-form label {
  display: block !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  margin-bottom: var(--spacing-xs) !important;
  color: hsl(var(--foreground)) !important;
}

#yith-ywraq-mail-form .required {
  color: var(--secondary-red) !important;
  text-decoration: none !important;
}

#yith-ywraq-mail-form input[type="text"],
#yith-ywraq-mail-form input[type="email"],
#yith-ywraq-mail-form textarea {
  width: 100% !important;
  padding: 0.625rem 0.75rem !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  color: hsl(var(--foreground)) !important;
  background: hsl(var(--background)) !important;
  border: 1px solid hsl(var(--input)) !important;
  border-radius: var(--radius) !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
}

#yith-ywraq-mail-form input:focus,
#yith-ywraq-mail-form textarea:focus {
  outline: none !important;
  border-color: var(--accent-blue) !important;
  box-shadow: 0 0 0 3px rgb(0 102 204 / 0.1) !important;
}

#yith-ywraq-mail-form textarea {
  min-height: 120px !important;
  resize: vertical !important;
}

/* ===== 送信ボタン (メインCTA) ===== */
.button.raq-send-request,
#yith-ywraq-mail-form .button {
  width: 100% !important;
  padding: 0.875rem 1.5rem !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: white !important;
  background: linear-gradient(to bottom, var(--primary-navy), var(--primary-blue)) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  cursor: pointer;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.button.raq-send-request:hover,
#yith-ywraq-mail-form .button:hover {
  background: linear-gradient(to bottom, var(--primary-blue), var(--accent-blue)) !important;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  transform: translateY(-1px);
}

.button.raq-send-request:active,
#yith-ywraq-mail-form .button:active {
  transform: translateY(0);
}

/* ===== レスポンシブ: タブレット ===== */
@media (max-width: 991px) {
  .ywraq-card-content {
    padding: var(--spacing-lg);
  }
  
  .elementor-element-a5e089c .elementor-heading-title {
    font-size: 1.75rem !important;
  }
}

/* ===== レスポンシブ: モバイル ===== */
@media (max-width: 767px) {
  .marine-form-row {
    display: block !important;
  }
  
  .marine-form-row .marine-label {
    display: block !important;
    margin-bottom: var(--spacing-xs) !important;
    text-align: left !important;
  }
  
  .marine-form-row .marine-input {
    width: 100% !important;
    max-width: none !important;
  }
  
  .ywraq-card-header {
    padding: var(--spacing-md) var(--spacing-lg);
  }
  
  .ywraq-card-content {
    padding: var(--spacing-lg);
  }
  
  .ywraq-card-title {
    font-size: 1.25rem !important;
  }
  
  .elementor-element-a5e089c .elementor-heading-title {
    font-size: 1.5rem !important;
  }
  
  /* テーブルのレスポンシブ対応 */
  .shop_table {
    display: block;
    overflow-x: auto;
    border-radius: calc(var(--radius) + 4px);
    overflow: hidden;
  }
  
  /* スマホでもヘッダーを表示（PCと同じグラデーション） - WooCommerceのデフォルトを上書き */
  .shop_table thead,
  .woocommerce table.shop_table_responsive thead,
  .woocommerce-page table.shop_table_responsive thead,
  .shop_table.shop_table_responsive thead {
    display: block !important;
    background: linear-gradient(to bottom, var(--primary-navy), var(--primary-blue));
  }
  
  .shop_table thead tr {
    display: flex !important;
    padding: 0.75rem 1rem;
  }
  
  .shop_table thead th {
    flex: 1;
    font-size: 0.75rem !important;
    padding: 0 !important;
    color: white !important;
    text-align: center !important;
  }
  
  .shop_table thead th.product-remove {
    flex: 0 0 40px;
  }
  
  .shop_table thead th.product-name {
    text-align: left !important;
  }
  
  .shop_table thead th.product-quantity {
    flex: 0 0 80px;
  }
  
  .shop_table thead th.product-subtotal {
    flex: 0 0 90px;
  }
  
  /* 商品行 - WooCommerceのデフォルトを上書き */
  .shop_table tbody tr,
  .woocommerce table.shop_table_responsive tbody tr,
  .woocommerce-page table.shop_table_responsive tbody tr {
    display: flex !important;
    align-items: center;
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid hsl(var(--border));
    gap: 0.75rem;
  }
  
  .shop_table tbody tr:last-child {
    border-bottom: none;
  }
  
  /* 削除ボタン - WooCommerceのデフォルトを上書き */
  .shop_table tbody td.product-remove,
  .woocommerce table.shop_table_responsive tbody td.product-remove,
  .woocommerce-page table.shop_table_responsive tbody td.product-remove {
    display: block !important;
    flex: 0 0 32px;
    padding: 0 !important;
    text-align: center;
    order: -3;
  }
  
  /* サムネイル画像 - WooCommerceのデフォルトを上書き */
  .shop_table tbody td.product-thumbnail,
  .woocommerce table.cart .product-thumbnail,
  .woocommerce-page table.cart .product-thumbnail,
  .woocommerce #content table.cart .product-thumbnail,
  .woocommerce-page #content table.cart .product-thumbnail,
  .woocommerce table.shop_table_responsive tbody td.product-thumbnail,
  .woocommerce-page table.shop_table_responsive tbody td.product-thumbnail {
    display: block !important;
    flex: 0 0 60px;
    padding: 0 !important;
    order: -2;
  }
  
  .shop_table tbody td.product-thumbnail img {
    display: block !important;
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 0.375rem;
  }
  
  /* 商品名 - WooCommerceのデフォルトを上書き */
  .shop_table tbody td.product-name,
  .woocommerce table.shop_table_responsive tbody td.product-name,
  .woocommerce-page table.shop_table_responsive tbody td.product-name {
    display: block !important;
    flex: 1;
    padding: 0 !important;
    text-align: left !important;
    order: -1;
    font-size: 0.813rem;
    line-height: 1.4;
  }
  
  .shop_table tbody td.product-name a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  
  /* 数量 - WooCommerceのデフォルトを上書き */
  .shop_table tbody td.product-quantity,
  .woocommerce table.shop_table_responsive tbody td.product-quantity,
  .woocommerce-page table.shop_table_responsive tbody td.product-quantity {
    display: block !important;
    flex: 0 0 70px;
    padding: 0 !important;
    text-align: center;
  }
  
  .shop_table tbody td.product-quantity .quantity {
    margin: 0;
  }
  
  .shop_table tbody td.product-quantity input {
    width: 60px !important;
    padding: 0.375rem 0.25rem !important;
    font-size: 0.875rem !important;
  }
  
  /* 合計 - WooCommerceのデフォルトを上書き */
  .shop_table tbody td.product-subtotal,
  .woocommerce table.shop_table_responsive tbody td.product-subtotal,
  .woocommerce-page table.shop_table_responsive tbody td.product-subtotal {
    display: block !important;
    flex: 0 0 80px;
    padding: 0 !important;
    text-align: right;
    font-weight: 600;
    font-size: 0.938rem;
    color: var(--primary-navy);
  }
  
  /* data-title属性を使わない（レイアウトで表現） - WooCommerceのデフォルトを上書き */
  .shop_table tbody td::before,
  .woocommerce table.shop_table_responsive tbody td::before,
  .woocommerce-page table.shop_table_responsive tbody td::before {
    display: none !important;
  }
  
  /* アクションボタン行 */
  .shop_table tbody tr.actions {
    display: block !important;
    padding: 1rem !important;
  }
  
  .shop_table tbody tr.actions td {
    display: block !important;
    text-align: center !important;
  }
}

/* ===== アクセシビリティ ===== */
*:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}

/* ===== アニメーション ===== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ywraq-card,
.yith-ywraq-mail-form-wrapper {
  animation: fadeIn 0.4s ease;
}

/* ===== プリント用スタイル ===== */
@media print {
  .shop_table .product-remove,
  .shop_table .actions,
  .button {
    display: none !important;
  }
  
  .ywraq-card,
  .shop_table {
    box-shadow: none !important;
    border: 1px solid #000 !important;
  }
}
/* 
==============================================
見積もりページ - サンクスページ対応
==============================================
*/

/* ===== サンクスページ: 成功メッセージ ===== */
.woocommerce-message {
  background: linear-gradient(to right, #10b981, #059669) !important;
  color: white !important;
  border: none !important;
  border-radius: calc(var(--radius) + 4px) !important;
  padding: var(--spacing-xl) !important;
  margin-bottom: var(--spacing-2xl) !important;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
  position: relative !important;
  overflow: hidden !important;
  text-align: center !important;
}

.woocommerce-message::before {
  content: '✓' !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  background: rgba(255, 255, 255) !important;
  border-radius: 50% !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  margin-bottom: var(--spacing-md) !important;
}

.woocommerce-message > * {
  color: white !important;
  margin: 0 !important;
}

/* サンクスページ専用のメッセージスタイル */
body.woocommerce-page .woocommerce-message {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  font-size: 1rem !important;
  line-height: 1.8 !important;
}

/* サンクスページ: 入力フォームを非表示 */
body[class*="sent"] .ywraq-card,
body[class*="sent"] .yith-ywraq-mail-form-wrapper,
.woocommerce-message ~ .ywraq-card,
.woocommerce-message ~ .yith-ywraq-mail-form-wrapper {
  display: none !important;
}

/* URLパラメータ ?sent=yes の場合も対応 */
.woocommerce-page .ywraq-wrapper:has(.woocommerce-message) .ywraq-card,
.woocommerce-page .ywraq-wrapper:has(.woocommerce-message) .yith-ywraq-mail-form-wrapper {
  display: none !important;
}

/* ===== ローディングボタンスタイル (Edge/IE互換) ===== */
#marine_submit_button {
  position: relative !important;
}

.garmin-btn-loading {
  opacity: 0.7;
  cursor: wait !important;
  padding-left: 50px !important;
}

.garmin-btn-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 20px;
  margin-top: -8px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: garmin-spin 1s linear infinite;
}

@keyframes garmin-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ===== レスポンシブ: モバイル ===== */
@media (max-width: 768px) {
  .woocommerce-message {
    padding: var(--spacing-lg) !important;
    font-size: 0.938rem !important;
  }

  .woocommerce-message::before {
    width: 40px !important;
    height: 40px !important;
    font-size: 1.25rem !important;
    margin-bottom: var(--spacing-sm) !important;
  }
}