/* ============================================================
   CONTACT.CSS — 客服中心頁
   ============================================================ */

/* ── CONTACT METHODS ── */
.methods-section { padding: 100px 0; background: var(--white); }
.methods-grid {
    display: grid; grid-template-columns: repeat(4,1fr);
    gap: 16px; margin-top: 56px;
}
.method-card {
    background: var(--y); border-radius: var(--radius-lg);
    padding: 40px 32px; border: 2px solid transparent; transition: all .3s;
}
.method-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(243,191,13,0.3); }
.method-icon {
    width: 72px; height: 72px; background: var(--white);
    border-radius: 18px; display: flex; align-items: center;
    justify-content: center; font-size: 36px; color: var(--black); margin-bottom: 20px;
}
.method-title { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 8px; color: var(--black); }
.method-value { font-size: 16px; color: var(--black); font-weight: 600; margin-bottom: 6px; }
.method-note  { font-size: 16px; color: rgba(0,0,0,0.55); }

/* ── TABS ── */
.tabs-section { background: var(--off); padding: 100px 0; }
.tabs-header  { display: flex; gap: 4px; margin-bottom: 48px; border-bottom: 2px solid #e0e0e0; }
.tab-btn {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 20px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
    padding: 14px 28px; background: none; border: none;
    border-bottom: 3px solid transparent; color: #aaa; cursor: pointer;
    transition: all .2s; position: relative; bottom: -2px;
}
.tab-btn.active { color: var(--black); border-bottom-color: var(--y); }
.tab-btn:hover  { color: var(--black); }
.tab-panel      { display: none; }
.tab-panel.active { display: block; animation: fadeUp .3s ease; }

/* ── FAQ ── */
.faq-list  { display: flex; flex-direction: column; gap: 12px; }
.faq-item  {
    background: var(--white); border-radius: var(--radius);
    overflow: hidden; border: 2px solid transparent; transition: border-color .2s;
}
.faq-item:hover  { border-color: rgba(243,191,13,0.4); }
.faq-item.open   { border-color: var(--y); }
.faq-q {
    width: 100%; display: flex; justify-content: space-between; align-items: center;
    padding: 22px 28px; background: none; border: none; cursor: pointer; text-align: left; gap: 16px;
}
.faq-q-text  { font-size: 17px; font-weight: 600; color: var(--black); }
.faq-toggle  { font-size: 24px; color: var(--y); font-weight: 600; transition: transform .3s; flex-shrink: 0; }
.faq-item.open .faq-toggle { transform: rotate(45deg); }
.faq-body    { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-item.open .faq-body { max-height: 300px; }
.faq-body p  { font-size: 16px; color: #666; line-height: 1.8; padding: 0 28px 22px; }

/* ── TUTORIALS ── */
.tut-steps {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 16px;
}
.tut-step {
    background: var(--white); border-radius: var(--radius-lg);
    padding: 40px 32px; position: relative;
    border: 2px solid var(--y); transition: transform .3s;
}
.tut-step:hover { transform: translateY(-4px); }
.tut-step-num {
    position: absolute; top: -18px; left: 24px;
    background: var(--y); color: var(--black);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 20px; font-weight: 600; padding: 4px 14px; border-radius: 100px;
}
.tut-step h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 600; text-transform: uppercase; margin-bottom: 12px; margin-top: 8px; }
.tut-step p  { font-size: 16px; color: #666; line-height: 1.8; }

/* ── PURCHASE TUTORIAL ── */
.purchase-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.purchase-steps { display: flex; flex-direction: column; gap: 12px; }
.p-step {
    display: flex; gap: 20px; align-items: flex-start;
    background: var(--white); border-radius: var(--radius);
    padding: 24px 28px; border-left: 4px solid var(--y);
}
.p-step-num  { font-family: 'Barlow Condensed', sans-serif; font-size: 36px; font-weight: 600; color: var(--y); line-height: 1; flex-shrink: 0; }
.p-step-text strong { font-size: 17px; font-weight: 600; color: var(--black); display: block; margin-bottom: 6px; }
.p-step-text p      { font-size: 16px; color: #666; line-height: 1.7; }
.shops-box { background: var(--white); border-radius: var(--radius-lg); padding: 40px; }
.shops-box h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 24px; font-weight: 600; text-transform: uppercase; margin-bottom: 20px; }
.shops-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.shop-tag {
    font-size: 16px; font-weight: 600; padding: 8px 18px;
    border: 2px solid var(--y); border-radius: 100px; color: var(--black);
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
    .methods-grid  { grid-template-columns: 1fr 1fr; }
    .purchase-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .methods-grid { grid-template-columns: 1fr; }
    .tabs-header  { overflow-x: auto; }
    .tab-btn      { font-size: 16px; padding: 12px 18px; white-space: nowrap; }
    .p-step       { flex-direction: column; gap: 10px; }
}