/* ============================================================ SWIVON interactive calculators — SHARED styles (loaded once) Moved out of per-article post_content (was duplicated in every DE/EN/KO post). Each article keeps only the calculator HTML + JS. All selectors are scoped (#swivon-tool / .sw2-*) except the Google Places .pac-* dropdown, which renders at level. ============================================================ */ /* ===== 1) Airport departure calculator — #swivon-tool ===== */ #swivon-tool{font-family:'DM Sans',sans-serif;display:flex;justify-content:center;box-sizing:border-box} #swivon-tool *,#swivon-tool *::before,#swivon-tool *::after{box-sizing:border-box;margin:0;padding:0} #swivon-tool .swv-card{background:#111111;border:1px solid rgba(201,168,76,0.2);border-radius:2px;width:100%;max-width:560px;animation:swvFadeUp 0.6s ease forwards} @keyframes swvFadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}} @keyframes swvSpin{to{transform:rotate(360deg)}} #swivon-tool .swv-header{padding:40px 40px 32px;border-bottom:1px solid rgba(201,168,76,0.2)} #swivon-tool .swv-brand{font-family:'Cormorant Garamond',serif;font-size:11px;font-weight:400;letter-spacing:4px;color:#C9A84C;text-transform:uppercase;margin-bottom:16px;display:block} #swivon-tool .swv-title{font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:300;line-height:1.2;color:#E8E4DC;margin:0;padding:0;border:none;background:none} #swivon-tool .swv-title em{color:#C9A84C;font-style:italic} #swivon-tool .swv-subtitle{margin-top:10px;font-size:13px;color:#7A7570;font-weight:300;line-height:1.6} #swivon-tool .swv-body{padding:36px 40px} #swivon-tool .swv-field{margin-bottom:24px} #swivon-tool .swv-label{display:block;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:#C9A84C;font-weight:500;margin-bottom:10px} #swivon-tool .swv-input,#swivon-tool .swv-select,#swivon-tool .swv-time{width:100%;background:#1A1A1A;border:1px solid rgba(201,168,76,0.15);border-radius:1px;color:#E8E4DC;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:300;padding:14px 18px;outline:none;transition:border-color 0.2s;-webkit-appearance:none;appearance:none;display:block} #swivon-tool .swv-input::placeholder{color:#7A7570} #swivon-tool .swv-input:focus,#swivon-tool .swv-select:focus,#swivon-tool .swv-time:focus{border-color:#C9A84C} #swivon-tool .swv-select option{background:#1A1A1A;color:#E8E4DC} #swivon-tool .swv-select-wrap{position:relative} #swivon-tool .swv-select-wrap::after{content:'▾';position:absolute;right:16px;top:50%;transform:translateY(-50%);color:#C9A84C;pointer-events:none;font-size:12px} #swivon-tool .swv-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} #swivon-tool .swv-note{background:#242424;border-left:2px solid #C9A84C;padding:12px 16px;font-size:12px;color:#7A7570;margin-bottom:28px;line-height:1.6} #swivon-tool .swv-note strong{color:#E8E4DC;font-weight:500} #swivon-tool .swv-btn{width:100%;background:#C9A84C;color:#0A0A0A;border:none;padding:16px;font-family:'DM Sans',sans-serif;font-size:11px;font-weight:500;letter-spacing:3px;text-transform:uppercase;cursor:pointer;transition:background 0.2s,transform 0.1s;border-radius:1px;display:flex;align-items:center;justify-content:center;gap:10px} #swivon-tool .swv-btn:hover{background:#E8CC7A} #swivon-tool .swv-btn:active{transform:scale(0.99)} #swivon-tool .swv-btn:disabled{opacity:0.6;cursor:not-allowed} #swivon-tool .swv-spinner{display:none;width:14px;height:14px;border:2px solid rgba(0,0,0,0.25);border-top-color:#0A0A0A;border-radius:50%;animation:swvSpin 0.7s linear infinite;flex-shrink:0} #swivon-tool .swv-btn.loading .swv-spinner{display:block} #swivon-tool .swv-error{display:none;color:#e07070;font-size:12px;margin-top:10px;padding:10px 14px;background:rgba(224,112,112,0.08);border-left:2px solid #e07070} #swivon-tool .swv-error.show{display:block} #swivon-tool .swv-result{display:none;margin-top:28px;border:1px solid rgba(201,168,76,0.2);border-radius:1px;overflow:hidden} #swivon-tool .swv-result.show{display:block;animation:swvFadeUp 0.4s ease forwards} #swivon-tool .swv-result-header{background:#242424;padding:16px 20px;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#7A7570} #swivon-tool .swv-result-main{padding:28px 20px;text-align:center;border-bottom:1px solid rgba(201,168,76,0.2)} #swivon-tool .swv-result-label{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#7A7570;margin-bottom:8px} #swivon-tool .swv-result-time{font-family:'Cormorant Garamond',serif;font-size:64px;font-weight:300;color:#C9A84C;line-height:1;letter-spacing:-1px} #swivon-tool .swv-result-note{font-size:12px;color:#7A7570;margin-top:8px;line-height:1.5} #swivon-tool .swv-timeline{padding:20px} #swivon-tool .swv-tl-item{display:flex;align-items:flex-start;gap:16px;padding:10px 0;border-bottom:1px solid rgba(201,168,76,0.07)} #swivon-tool .swv-tl-item:last-child{border-bottom:none} #swivon-tool .swv-tl-dot{width:8px;height:8px;border-radius:50%;background:#C9A84C;margin-top:5px;flex-shrink:0;opacity:0.35} #swivon-tool .swv-tl-dot.active{opacity:1;box-shadow:0 0 8px rgba(201,168,76,0.5)} #swivon-tool .swv-tl-content{flex:1} #swivon-tool .swv-tl-time{font-size:13px;font-weight:500;color:#E8E4DC} #swivon-tool .swv-tl-desc{font-size:12px;color:#7A7570;margin-top:2px;line-height:1.4} #swivon-tool .swv-cta{background:linear-gradient(135deg,#242424,#1A1A1A);border-top:1px solid rgba(201,168,76,0.2);padding:20px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} #swivon-tool .swv-cta-text{font-size:13px;color:#7A7570;line-height:1.4} #swivon-tool .swv-cta-text strong{color:#E8E4DC;display:block;margin-bottom:2px} #swivon-tool .swv-cta-btn{background:transparent;border:1px solid #C9A84C;color:#C9A84C;padding:10px 20px;font-family:'DM Sans',sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:all 0.2s;text-decoration:none;display:inline-block} #swivon-tool .swv-cta-btn:hover{background:#C9A84C;color:#0A0A0A} #swivon-tool .swv-footer{padding:16px 40px;border-top:1px solid rgba(201,168,76,0.2);display:flex;justify-content:space-between;align-items:center} #swivon-tool .swv-footer-note{font-size:11px;color:#7A7570} #swivon-tool .swv-footer-brand{font-family:'Cormorant Garamond',serif;font-size:13px;color:#C9A84C;letter-spacing:2px} #swivon-tool #swvLocationWrap{width:100%} #swivon-tool gmp-place-autocomplete{width:100%;display:block} /* Google Places autocomplete dropdown — renders at level, cannot be scoped */ .pac-container{background:#1A1A1A !important;border:1px solid rgba(201,168,76,0.2) !important;border-top:none !important;font-family:'DM Sans',sans-serif !important;box-shadow:0 8px 24px rgba(0,0,0,0.6) !important;border-radius:0 !important} .pac-item{padding:10px 16px !important;color:#E8E4DC !important;border-top:1px solid rgba(201,168,76,0.07) !important;cursor:pointer !important;font-size:13px !important;font-family:'DM Sans',sans-serif !important} .pac-item:hover,.pac-item-selected{background:#242424 !important} .pac-item-query{color:#E8E4DC !important;font-size:13px !important} .pac-matched{color:#C9A84C !important;font-weight:500 !important} .pac-icon,.pac-logo{display:none !important} @media (max-width:480px){ #swivon-tool .swv-header,#swivon-tool .swv-body,#swivon-tool .swv-footer{padding-left:24px;padding-right:24px} #swivon-tool .swv-row{grid-template-columns:1fr} #swivon-tool .swv-result-time{font-size:48px} #swivon-tool .swv-title{font-size:26px} } /* ===== 2) Currency calculator — .sw2-* ===== */ .sw2-wrap{width:100%;max-width:620px;margin:0 auto;font-family:'Manrope',sans-serif} .sw2-eyebrow{font-size:14px;letter-spacing:3px;text-transform:uppercase;color:#C9A84C;margin-bottom:20px;font-weight:500} .sw2-card{background:#0c0c0c;border:1px solid rgba(201,168,76,0.25);padding:32px} .sw2-label{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.70);margin-bottom:8px;display:block} .sw2-input-row{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#141414;border:1px solid rgba(201,168,76,0.2);margin-bottom:28px;transition:border-color 0.2s} .sw2-input-row:focus-within{border-color:rgba(201,168,76,0.6)} .sw2-chf-badge{font-size:12px;font-weight:600;letter-spacing:2px;color:#C9A84C;min-width:38px} .sw2-chf-input{flex:1;font-size:28px;font-weight:600;border:none;background:transparent;color:#E8E4DC;outline:none;width:100%;font-family:'Cormorant Garamond',Georgia,serif;-webkit-text-fill-color:#E8E4DC} .sw2-divider{height:1px;background:rgba(201,168,76,0.12);margin:24px 0} .sw2-main-amount-row{display:flex;align-items:baseline;gap:10px;margin-bottom:6px} .sw2-main-amount{font-family:'Cormorant Garamond',Georgia,serif;font-size:48px;font-weight:300;color:#E8E4DC;line-height:1} .sw2-main-code{font-size:16px;font-weight:500;color:#C9A84C;letter-spacing:2px} .sw2-main-name{font-size:14px;color:rgba(255,255,255,0.65);letter-spacing:0.5px;margin-bottom:4px} .sw2-main-rate{font-size:13px;color:rgba(255,255,255,0.50);letter-spacing:0.3px} .sw2-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px} .sw2-cell{background:#141414;border:1px solid rgba(201,168,76,0.1);padding:14px 16px;cursor:pointer;transition:border-color 0.2s,background 0.2s} .sw2-cell:hover{border-color:rgba(201,168,76,0.4);background:#1a1a1a} .sw2-cell-code{font-size:11px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:#C9A84C;margin-bottom:6px} .sw2-cell-val{font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;font-weight:300;color:#E8E4DC;line-height:1;margin-bottom:4px} .sw2-cell-name{font-size:12px;color:rgba(255,255,255,0.70);letter-spacing:1px} .sw2-updated{font-size:13px;color:rgba(255,255,255,0.80);text-align:right;margin-top:20px;letter-spacing:1px;line-height:1.6} .sw2-loading{font-size:12px;color:rgba(255,255,255,0.55);padding:1rem 0;letter-spacing:1px} .sw2-error{font-size:12px;color:#c0392b;padding:12px 16px;background:rgba(192,57,43,0.08);border-left:2px solid #c0392b;line-height:1.6} @media (max-width:480px){ .sw2-card{padding:24px 20px} .sw2-main-amount{font-size:36px} .sw2-grid{grid-template-columns:1fr} }