/* smartphones.html 專屬樣式（2026-09-10 重建，比照 web-technologies / interactive）
 * 共用元件（webTechnologies / player-slider / application-cards / wt-servers /
 * wt-faq / wt-howit / whitepaper / contact-us / finalButton）沿用 ../css/multidisplay.css
 * 這裡只放 smartphones 專屬：QR 類型、QR 產生器功能區
 * 主色：CAYIN 藍→teal #007ED4 → #00B3A6
 */

.webTechnologies .contents .box1 ul.sp-points { width: 100%; float: left; display: block; margin: 12px 0 0; padding-left: 1.15em; color: #595959; }
.webTechnologies .contents .box1 ul.sp-points li { margin-bottom: 10px; }
/* multidisplay.css 的 `.box1 span { width:100%; float:left; display:block }` 會把內文的
   <span class="gt">SMP</span> 變成整行區塊 → 還原成 inline */
.webTechnologies .contents .box1 span.gt { width: auto; float: none; display: inline; }

/* ── QR code 類型 ── */
.sp-qrtypes { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 26px; max-width: 820px; margin: 18px auto 0; padding: 0 20px; box-sizing: border-box; }
.sp-qrtype { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 118px; }
.sp-qrtype__circle { width: 92px; height: 92px; border-radius: 50%; background: #f4f6fb; display: flex; align-items: center; justify-content: center; }
.sp-qrtype__circle img { width: 44px; height: 44px; }
.sp-qrtype span { font-size: 14px; color: #595959; font-weight: 500; }
@media only screen and (max-width: 600px) { .sp-qrtype { width: 40%; } }

/* ── QR 產生器功能（顏色 / Logo）── */
.sp-features { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 900px; margin: 18px auto 0; padding: 0 20px; box-sizing: border-box; }
.sp-feature { background: #fff; border: 1px solid #E5E5E5; border-radius: 12px; padding: 18px 22px; text-align: center; box-shadow: 0 2px 14px rgba(0,0,0,0.06); display: flex; flex-direction: column; }
.sp-feature h3 { margin: 0 0 6px; font-size: 1.125em; color: #222; }
.sp-feature p { margin: 0 0 10px; font-size: 0.92em; line-height: 1.5; color: #595959; }
.sp-feature__pic { width: 100%; max-width: 374px; height: 118px; margin: auto; overflow: hidden; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.sp-feature__pic img { width: 100%; height: auto; display: block; flex: none; }
.sp-feature__logos { display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap; margin: auto 0; }
.sp-feature__logos .circle { width: 66px; height: 66px; border-radius: 50%; background: #f4f6fb; display: flex; align-items: center; justify-content: center; }
.sp-feature__logos .circle img { width: 38px; }
.sp-feature__logos .op { font-size: 20px; color: #00B3A6; font-weight: 700; }
@media only screen and (max-width: 760px) { .sp-features { grid-template-columns: 1fr; } }

/* ── 「What a QR code can do」tab slider（手機 mockup + 文字）── */
.sp-apps { max-width: 900px; margin: 14px auto 0; padding: 0 44px; position: relative; box-sizing: border-box; }
.sp-apps .swiper-wrapper { padding: 0; }
.sp-apps .swiper-slide { height: auto; }
.sp-app { display: flex; gap: 40px; align-items: center; justify-content: center; padding: 14px 0 10px; }
.sp-app__phone { flex: 0 0 190px; max-width: 190px; }
.sp-app__phone img { width: 100%; height: auto; display: block; }
.sp-app__text { flex: 1; max-width: 440px; text-align: left; }
.sp-app__text h3 { margin: 0 0 12px; font-size: 1.25em; font-weight: 500; color: #222; }
.sp-app__text p { margin: 0; font-size: 0.95em; line-height: 1.7; color: #595959; }
.sp-apps .swiper-pagination,
.sp-apps .swiper-pagination.swiper-pagination-horizontal,
.sp-apps.swiper-horizontal > .swiper-pagination-bullets { position: static !important; inset: auto !important; transform: none !important; margin: 0 auto 22px !important; max-width: 820px; display: flex; flex-wrap: wrap; gap: 0 22px; justify-content: center; border-bottom: 1px solid #e0e0e0; }
.sp-apps .swiper-pagination-bullet { width: auto; height: auto; background: none; opacity: 1; border-radius: 0; color: #888; font-size: 0.95em; line-height: 1.3; padding: 8px 3px; margin: 0 !important; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.sp-apps .swiper-pagination-bullet:hover { color: #007ED4; }
.sp-apps .swiper-pagination-bullet-active { color: #007ED4; font-weight: 600; border-bottom-color: #007ED4; }
.sp-apps .swiper-button-prev, .sp-apps .swiper-button-next { color: #007ED4; }
.sp-apps .swiper-button-prev::after, .sp-apps .swiper-button-next::after { font-size: 20px; }
@media only screen and (max-width: 760px) {
	.sp-apps { padding: 0 16px; }
	.sp-apps .swiper-button-prev, .sp-apps .swiper-button-next { display: none; }
	.sp-apps .swiper-pagination,
	.sp-apps .swiper-pagination.swiper-pagination-horizontal { gap: 0 14px; margin: 0 auto 16px !important; }
	.sp-apps .swiper-pagination-bullet { font-size: 0.9em; padding: 8px 2px; }
	.sp-app { flex-direction: column; gap: 18px; text-align: center; }
	.sp-app__text { text-align: center; }
	.sp-app__phone { flex-basis: auto; max-width: 160px; }
}

/* ── Contact Us 按鈕漸層（覆蓋 multidisplay.css 的紫）── */
.contact-us-section .mail_btn { background: linear-gradient(90deg, #007ED4 0%, #00B3A6 100%); }