/* ============================================================ * Spin & Win — enquiry popup: 3D cylinder carousel of lotus frames. * All rules scoped under .spin-popup (avoid clashing with site CSS). * Petals (.pw-fs-*) are appended to → kept global. * Theme: #095688 / #064a77, accent #83d0e5, gold #095688. * ============================================================ */ /* ---------- celebration petals (global; appended to body) ---------- */ .pw-fs-celebrate{ position:fixed; inset:0; pointer-events:none; z-index:100000; overflow:hidden; } .pw-fs-petal{ position:absolute; top:-30px; will-change:transform,opacity; } @keyframes pwFsFall{ 0%{transform:translate(0,-30px) rotate(0);opacity:0} 10%{opacity:1} 100%{transform:translate(var(--dx),105vh) rotate(var(--rot));opacity:0} } @keyframes pwPulse{ 0%,100%{box-shadow:0 6px 16px rgba(6,74,119,.35)} 50%{box-shadow:0 6px 26px rgba(131,208,229,.85)} } /* ---------- modal box (base comes from .enquiry-popup; we only add) ---------- */ .spin-popup{ position:relative; color:#22332e; font-family:"Montserrat",sans-serif; background:linear-gradient(rgba(255,253,248,.55), rgb(0 0 0 / 70%)), url("../images/offer/modal-bg.webp") center top/cover no-repeat #000000; } .spin-popup .spin-close{ position:absolute; top:12px; right:14px; width:34px; height:34px; border:none; border-radius:50%; background:rgba(255,255,255,.92); color:#064a77; font-size:22px; line-height:1; cursor:pointer; z-index:50; box-shadow:0 2px 8px rgba(0,0,0,.18); transition:background .2s; } .spin-popup .spin-close:hover{ background:#dceaf0; } .spin-step[hidden]{ display:none; } .spin-step-1{ padding:22px 26px 22px; text-align:center; } /* step 2: compact header + form */ .spin-step-2{ padding:22px 24px 22px; } .spin-step-2 .spin-head{ margin-bottom:12px; } .spin-step-2 .spin-logo{ width:118px; margin-bottom:7px; } .spin-step-2 .spin-eyebrow{ font-size:14px; margin-bottom:1px; } .spin-step-2 .spin-title{ font-size:25px; margin-bottom:4px; } .spin-step-2 .spin-scholar{ font-size:13px; } /* ---------- modern form fields ---------- */ .spin-popup .enquiry-form-group{ margin-bottom:11px; } .spin-popup .enquiry-form-row{ margin-bottom:0; } .spin-popup .enquiry-form-row .enquiry-form-group{ margin-bottom:11px; } .spin-popup .enquiry-form-group input, .spin-popup .enquiry-form-group select, .spin-popup .enquiry-form-group textarea{ width:100%; padding:12px 14px; border:1.5px solid #dde6ec; border-radius:12px; background:#fff; font:500 14px/1.3 "Nunito",sans-serif; color:#22332e; box-shadow:0 3px 10px rgba(6,74,119,.08); transition:border-color .2s ease, box-shadow .2s ease, background .2s ease; } .spin-popup .enquiry-form-group input::placeholder, .spin-popup .enquiry-form-group textarea::placeholder{ color:#9aa7b2; } .spin-popup .enquiry-form-group input:focus, .spin-popup .enquiry-form-group select:focus, .spin-popup .enquiry-form-group textarea:focus{ border-color:#095688; background:#fff; box-shadow:0 0 0 3px rgba(9,86,136,.12); outline:none; } .spin-popup .enquiry-form-group textarea{ min-height:60px; resize:vertical; } /* left icons per field */ .spin-popup #enquiry_name, .spin-popup #enquiry_email, .spin-popup #enquiry_location, .spin-popup #enquiry_course, .spin-popup #enquiry_month{ padding-left:42px; background-repeat:no-repeat; background-position:left 14px center; background-size:18px 18px; } .spin-popup #enquiry_message{ padding-left:42px; background-repeat:no-repeat; background-position:left 14px top 13px; background-size:18px 18px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23095688' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H8l-5 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); } .spin-popup #enquiry_name{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23095688' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); } .spin-popup #enquiry_email{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23095688' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); } /* selects: left icon + right chevron */ .spin-popup #enquiry_location, .spin-popup #enquiry_course, .spin-popup #enquiry_month{ background-position:left 14px center, right 14px center; background-size:18px 18px, 12px 12px; padding-right:36px; background-image:none, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23095688' d='M6 8 1 3h10z'/%3E%3C/svg%3E"); } .spin-popup #enquiry_location{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23095688' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6-7-11a7 7 0 0 1 14 0c0 5-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23095688' d='M6 8 1 3h10z'/%3E%3C/svg%3E"); } .spin-popup #enquiry_course{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23095688' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 9-4 9 4-9 4z'/%3E%3Cpath d='M7 11v4c0 1.2 2.2 2.5 5 2.5s5-1.3 5-2.5v-4'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23095688' d='M6 8 1 3h10z'/%3E%3C/svg%3E"); } .spin-popup #enquiry_month{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23095688' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M3 9h18M8 2v4M16 2v4'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23095688' d='M6 8 1 3h10z'/%3E%3C/svg%3E"); } /* chosen course-type shown read-only in step 2 (cap icon + lock) */ .spin-popup #enquiry_type{ padding-left:42px; padding-right:36px; background-repeat:no-repeat; background-position:left 14px center, right 14px center; background-size:18px 18px, 12px 12px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23095688' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 9-4 9 4-9 4z'/%3E%3Cpath d='M7 11v4c0 1.2 2.2 2.5 5 2.5s5-1.3 5-2.5v-4'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23095688' d='M6 8 1 3h10z'/%3E%3C/svg%3E"); } .spin-popup #enquiry_type:disabled{ opacity:1; cursor:default; color:#064a77; font-weight:700; -webkit-text-fill-color:#064a77; background-color:#eef4f8; border-color:#d6e3ec; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23095688' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 9-4 9 4-9 4z'/%3E%3Cpath d='M7 11v4c0 1.2 2.2 2.5 5 2.5s5-1.3 5-2.5v-4'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23095688' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); background-size:18px 18px, 14px 14px; } .spin-popup .enquiry-optional-note{ margin:8px 0 10px; } .spin-popup .optional-note-wrap .optional-note-toggle .optional-note-label{ color:#fff; } .spin-popup .enquiry-submit-btn{ margin-top:6px; border-radius:40px; } .spin-popup .enquiry-form-footer{ margin-top:10px; } .spin-popup .enquiry-form-consent{ color:#cddbe6; text-shadow:0 1px 4px rgba(0,0,0,.45); } .spin-popup .enquiry-form-consent i{ color:#83d0e5; } .spin-popup .spin-eyebrow{ text-shadow:0 1px 6px rgba(255,253,248,.85); } .spin-popup .spin-title{ text-shadow:0 1px 8px rgba(255,253,248,.7); } /* ---------- header ---------- */ .spin-head{ text-align:center; margin:0 0 10px; } .spin-logo{ width:122px; height:auto; display:block; margin:0 auto 8px; } /* persistent trust bar (bottom of modal) */ .spin-popup .spin-trustbar{ display:flex; justify-content:space-between; gap:6px; padding:14px 18px; background:linear-gradient(135deg,#095688,#064a77); border-radius:0 0 16px 16px; } .spin-popup .spin-tb-item{ display:flex; align-items:center; gap:9px; flex:1; justify-content:center; } .spin-popup .spin-tb-ico{ display:flex; align-items:center; justify-content:center; width:46px; height:46px; flex:none; border-radius:50%; background:#eef5f9; box-shadow:0 2px 6px rgba(0,0,0,.18); } .spin-popup .spin-tb-ico img{ width:30px; height:30px; object-fit:contain; } .spin-popup .spin-tb-txt{ font:600 9.5px/1.25 "Nunito",sans-serif; color:#cfe0ec; text-align:left; } .spin-popup .spin-tb-txt b{ display:block; font:700 11px/1.2 "Montserrat",sans-serif; color:#fff; } @media (max-width:480px){ .spin-popup .spin-trustbar{ padding:10px 8px; gap:3px; } .spin-popup .spin-tb-ico{ width:32px; height:32px; } .spin-popup .spin-tb-ico img{ width:20px; height:20px; } .spin-popup .spin-tb-txt{ font-size:8px; } .spin-popup .spin-tb-txt b{ font-size:9px; } } .spin-eyebrow{ font:italic 500 13px/1.3 "Montserrat",sans-serif; color:#3a4552; margin:0 0 2px; } .spin-title{ font:700 23px/1.15 "Montserrat",sans-serif; color:#064a77; margin:0 0 4px; } .spin-scholar{ display:inline-flex; align-items:center; justify-content:center; gap:12px; margin:4px auto 0; padding:5px 16px; border-radius:30px; background:linear-gradient(135deg,#f1f8fb,#e9f3f8); border:1px solid #d9e8f0; font:italic 700 13.5px/1.1 "Montserrat",sans-serif; color:#095688; } .spin-scholar-ico{ width:36px; height:36px; object-fit:contain; flex:none; } /* ---------- course-type select (label + select in one row) ---------- */ .spin-field{ display:flex; align-items:center; gap:12px; text-align:left; margin:0 auto 14px; max-width:430px; } .spin-field label{ flex:none; white-space:nowrap; font:600 13px/1 "Nunito",sans-serif; color:#3a4a44; margin:0; } .spin-field select{ flex:1; width:100%; padding:12px 14px; border-radius:12px; border:1.5px solid #d8e0e6; background:#fff; font:500 15px/1 "Nunito",sans-serif; color:#22332e; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23889' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; } .spin-field select:focus{ outline:none; border-color:#095688; box-shadow:0 0 0 3px rgba(9,86,136,.15); } .spin-field select:disabled{ opacity:.65; cursor:default; background-color:#f3f6f8; } /* highlight the course-type until the user picks one */ .spin-field select.is-highlight{ border-color:#095688; background:#f1f8fb; animation:spinSelPulse 1.8s ease-in-out infinite; } @keyframes spinSelPulse{ 0%,100%{box-shadow:0 0 0 3px rgba(9,86,136,.14)} 50%{box-shadow:0 0 0 6px rgba(9,86,136,.26)} } /* ---------- 3D cylinder carousel ---------- */ .spin-popup .pwc-stagewrap{ position:relative; padding:0 0 4px; } .spin-popup .pwc-stage{ position:relative; width:100%; height:360px; perspective:1100px; transition:filter .4s ease, opacity .4s ease, transform .4s ease; } .spin-popup .pwc-stage.is-blurred{ filter:blur(7px); opacity:.5; transform:scale(.95); } .spin-popup .pwc-stage::before{ content:""; position:absolute; left:50%; top:48%; width:370px; height:320px; transform:translate(-50%,-50%); background:radial-gradient(ellipse, rgba(9,86,136,.12), transparent 70%); pointer-events:none; } .spin-popup .pwc-stage::after{ content:""; position:absolute; left:50%; bottom:6px; width:260px; height:28px; transform:translateX(-50%); background:radial-gradient(ellipse, rgba(0,0,0,.22), transparent 72%); pointer-events:none; filter:blur(2px); } .spin-popup .pwc-rotor{ position:absolute; left:0; top:0; width:100%; height:100%; transform-style:preserve-3d; } .spin-popup .pwc-card{ position:absolute; left:50%; top:50%; width:152px; height:341px; margin:-170px 0 0 -76px; transform-origin:center center; filter:drop-shadow(0 14px 24px rgba(0,0,0,.28)); } .spin-popup .pwc-frame{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; filter:brightness(1.06) contrast(1.1) saturate(1.08); } .spin-popup .pwc-content{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:0 12px; text-align:center; } .spin-popup .pwc-card-icon{ width:52px; height:52px; object-fit:contain; margin-bottom:4px; } .spin-popup .pwc-glass{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:134px; height:196px; background:radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(255,255,255,.72) 34%, rgba(255,255,255,.55) 58%, rgba(255,255,255,0) 80%); pointer-events:none; } .spin-popup .pwc-glass--prize{ width:138px; height:196px; } .spin-popup .pwc-num{ font:700 44px/1 "Montserrat",sans-serif; color:#064a77; } .spin-popup .pwc-num i{ font-style:normal; font-size:.5em; vertical-align:.2em; color:#095688; margin-left:2px; } .spin-popup .pwc-off{ font:600 11px/1 "Nunito",sans-serif; letter-spacing:3px; color:#095688; margin-top:3px; } .spin-popup .pwc-word{ font:italic 600 20px/1 "Montserrat",sans-serif; color:#095688; margin-top:7px; } .spin-popup .pwc-word--solo{ font-size:25px; margin-top:0; } .spin-popup .pwc-card.is-center{ filter:drop-shadow(0 0 16px rgba(131,208,229,.7)) drop-shadow(0 14px 22px rgba(0,0,0,.34)); } .spin-popup .pwc-card.is-won.is-center{ filter:drop-shadow(0 0 26px rgba(131,208,229,.95)) drop-shadow(0 14px 22px rgba(0,0,0,.34)); } /* ---------- win reveal (frame zooms to centre, carousel blurs) ---------- */ .spin-popup .pwc-reveal{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:40; opacity:0; pointer-events:none; transition:opacity .4s ease; } .spin-popup .pwc-reveal.show{ opacity:1; pointer-events:auto; } .spin-popup .pwc-prize{ position:relative; width:150px; transform:scale(.78); transition:transform .5s cubic-bezier(.2,.9,.35,1.35); filter:drop-shadow(0 20px 36px rgba(6,74,119,.4)); } .spin-popup .pwc-reveal.show .pwc-prize{ transform:scale(1); } .spin-popup .pwc-prize .pwc-frame{ position:relative; inset:auto; width:100%; height:auto; object-fit:contain; } .spin-popup .pwc-prize-content{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:0 16px; text-align:center; } .spin-popup .pwc-prize-icon{ width:46px; height:46px; object-fit:contain; margin-bottom:4px; } .spin-popup .pwc-prize-eyebrow{ font:600 8.5px/1 "Nunito",sans-serif; letter-spacing:3px; text-transform:uppercase; color:#095688; text-shadow:0 1px 3px rgba(255,255,255,.9); } .spin-popup .pwc-prize-num{ font:700 46px/1 "Montserrat",sans-serif; color:#064a77; margin-top:3px; text-shadow:0 2px 4px rgba(255,255,255,.85); } .spin-popup .pwc-prize-num i{ font-style:normal; font-size:.5em; vertical-align:.2em; color:#095688; } .spin-popup .pwc-prize-off{ font:600 11px/1 "Nunito",sans-serif; letter-spacing:4px; color:#095688; text-shadow:0 1px 3px rgba(255,255,255,.9); } .spin-popup .pwc-prize-note{ margin-top:8px; font:500 10px/1.4 "Nunito",sans-serif; color:#33424b; max-width:112px; text-shadow:0 1px 3px rgba(255,255,255,.95); } .spin-popup .pwc-claim{ margin-top:18px; } /* ---------- spin button / skip / hint ---------- */ .spin-popup .pw-btn{ appearance:none; cursor:pointer; font:700 14px/1 "Montserrat",sans-serif; color:#064a77; display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:13px 30px; border-radius:40px; letter-spacing:1.5px; text-transform:uppercase; background:#fff; border:1.5px solid #cddde8; box-shadow:0 6px 16px rgba(6,74,119,.14); transition:transform .15s ease, box-shadow .15s ease, border-color .2s, opacity .2s; } .spin-popup .pw-btn:hover:not(:disabled){ transform:translateY(-2px); border-color:#095688; box-shadow:0 12px 26px rgba(6,74,119,.22); } .spin-popup .pw-btn:disabled{ opacity:.55; cursor:default; } .spin-popup .pw-btn.awake{ animation:pwPulse 1.8s ease-in-out infinite; } .spin-popup .pwc-lotus{ width:33px; height:auto; flex:none; } .spin-popup .pwc-skip{ display:block; margin:13px auto 0; background:none; border:none; cursor:pointer; font:500 12px/1.4 "Nunito",sans-serif; color:#8a96a3; text-decoration:underline; text-underline-offset:3px; transition:color .2s; } .spin-popup .pwc-skip:hover{ color:#064a77; } .spin-popup .pw-hint{ min-height:0; margin:8px 0 0; font:500 13px/1.4 "Nunito",sans-serif; color:#5b6b63; } .spin-popup .pw-hint:empty{ display:none; margin:0; } /* khaali hint koi jagah na le (no scroll) */ /* ---------- step-2 discount banner ---------- */ .spin-popup .spin-banner{ display:flex; align-items:center; justify-content:center; gap:13px; padding:6px; border-radius:14px; background:#fff; color:#064a77; margin-bottom:15px; font:600 14px/1.25 "Nunito",sans-serif; border:2.5px solid #095688; position:relative; } .spin-popup .spin-banner-gift{ width:36px; height:36px; object-fit:contain; flex:none; filter:drop-shadow(0 3px 5px rgba(0,0,0,.2)); } .spin-popup .spin-banner-txt{ letter-spacing:.2px; } .spin-popup .spin-banner b{ color:#064a77; font:800 19px/1 "Montserrat",sans-serif; margin:0 2px; } /* ===== Shared frame result card (popup "already claimed" + page "enrolled") ===== */ .frame-result{ position:relative; width:312px; max-width:86%; margin:0 auto; } .frame-result .fr-frame{ display:block; width:100%; height:auto; } .frame-result .fr-veil{ position:absolute; left:50%; top:49%; transform:translate(-50%,-50%); width:72%; height:60%; pointer-events:none; background:radial-gradient(ellipse at center, rgba(255,255,255,.97) 0%, rgba(255,255,255,.93) 56%, rgba(255,255,255,0) 82%); border-radius:50%; } .frame-result .fr-content{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:17% 13% 18%; text-align:center; } .frame-result .fr-seal{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:#eaf3f8; margin:0 0 8px; } .frame-result .fr-seal svg{ width:23px; height:23px; } .frame-result .fr-eyebrow{ font:700 10px/1 "Montserrat",sans-serif; letter-spacing:2px; text-transform:uppercase; color:#46a598; margin:0 0 5px; } .frame-result .fr-title{ font:800 19px/1.18 "Montserrat",sans-serif; color:#064a77; margin:0 0 6px; } .frame-result .fr-offer{ font:700 12.5px/1.4 "Nunito",sans-serif; color:#095688; margin:0 0 6px; } .frame-result .fr-offer[hidden]{ display:none; } .frame-result .fr-offer b{ color:#3f9f93; font-size:1.12em; } .frame-result .fr-msg{ font:500 11.5px/1.5 "Nunito",sans-serif; color:#5b6b73; margin:0 0 13px; max-width:200px; } .frame-result .fr-actions{ display:flex; flex-direction:column; gap:7px; align-items:center; } .frame-result .fr-btn{ display:inline-flex; align-items:center; justify-content:center; min-width:146px; padding:10px 24px; border-radius:999px; border:none; cursor:pointer; font:700 12.5px/1 "Montserrat",sans-serif; color:#fff; background:linear-gradient(135deg,#095688,#064a77); box-shadow:0 8px 16px rgba(6,74,119,.26); text-decoration:none; } .frame-result .fr-btn-ghost{ background:transparent; color:#064a77; border:1.5px solid #cddde8; box-shadow:none; padding:8px 22px; } .spin-popup .spin-step-done{ padding:10px 14px 12px; text-align:center; } /* "already claimed" popup → clean floating frame (no modal bg / trust bar) */ .spin-popup.is-done{ background:transparent; box-shadow:none; } .spin-popup.is-done .spin-close{ display:none; } .spin-popup.is-done .spin-trustbar{ display:none; } .frame-result .fr-close{ position:absolute; top:11%; right:12%; z-index:6; width:27px; height:27px; border-radius:50%; border:none; cursor:pointer; background:rgba(255,255,255,.92); color:#064a77; font:400 20px/1 "Montserrat",sans-serif; display:flex; align-items:center; justify-content:center; box-shadow:0 3px 8px rgba(6,74,119,.22); transition:background .2s,color .2s; } .frame-result .fr-close:hover{ background:#fff; color:#095688; } /* enrollment-page discount banner (sits on the page form, outside the modal) */ .enroll-spin-banner{ display:flex; align-items:center; justify-content:center; gap:12px; margin:0 0 18px; padding:10px 18px; border-radius:14px; background:#fff; color:#064a77; font:600 14px/1.3 "Nunito",sans-serif; border:2px solid #095688; box-shadow:0 6px 16px rgba(6,74,119,.1); } .enroll-spin-banner .esb-gift{ width:34px; height:34px; object-fit:contain; flex:none; } .enroll-spin-banner b{ color:#064a77; font:800 18px/1 "Montserrat",sans-serif; margin:0 2px; } /* already-enrolled done card (registration page) — uses the shared frame card, no outer box */ .enroll-done-card{ display:flex; justify-content:center; padding:6px 0 4px; } /* offer banner above the enrollment form (registration.php) */ .enroll-form-banner{ display:block; width:100%; height:auto; border-radius:14px; margin:0 0 18px; } /* ===================== Registration form — compact + modern (registration.php) ===================== */ /* tighter vertical rhythm */ #enroll-form .hyr-form-group{ margin-bottom:11px; } #enroll-form .hyr-form-row{ gap:11px; } #enroll-form .hyr-label{ font-size:12px; margin:0 0 5px; color:#33444f; } /* modern field shell (selective !important to beat .contact-input) */ #enroll-form .hyr-input{ border-radius:12px !important; border:1.5px solid #dbe7ee !important; background-color:#fff !important; font-size:13.5px !important; color:#1a2733 !important; } #enroll-form .hyr-input:focus{ border-color:#095688 !important; box-shadow:0 0 0 3px rgba(9,86,136,.12) !important; } #enroll-form .hyr-input::placeholder{ font-size:12.5px !important; color:#9bb0bb !important; } /* left icon for every field EXCEPT the intl-tel phone (.left-padding keeps its flag space) */ #enroll-form .hyr-input:not(.left-padding){ padding-left:42px !important; background-repeat:no-repeat; background-position:left 14px center; background-size:18px 18px; } #enroll-form textarea.hyr-input{ min-height:80px !important; background-position:left 14px top 12px; } /* selects: icon left + chevron right (override site triangle) */ #enroll-form select.hyr-input:not(.left-padding){ padding-right:38px !important; background-repeat:no-repeat,no-repeat; background-position:left 14px center, right 13px center; background-size:18px 18px, 13px 13px; } /* per-field icons (navy line glyphs) */ #enroll-form #enroll-name{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23095688' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); } #enroll-form #enroll-country{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23095688' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E"); } #enroll-form #email{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23095688' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); } #enroll-form #message{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23095688' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H8l-5 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); } #enroll-form #enroll_course_type{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23095688' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 9-4 9 4-9 4z'/%3E%3Cpath d='M7 11v4c0 1.2 2.2 2.5 5 2.5s5-1.3 5-2.5v-4'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23095688' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } #enroll-form #enroll-location-field{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23095688' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6-7-11a7 7 0 0 1 14 0c0 5-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23095688' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } #enroll-form #course{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23095688' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5a2 2 0 0 1 2-2h13v18H6a2 2 0 0 1-2-2z'/%3E%3Cpath d='M4 17h15'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23095688' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } #enroll-form #enroll-location-accommodation-type{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23095688' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7'/%3E%3Cpath d='M5 10v9h14v-9'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23095688' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } #enroll-form #month{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23095688' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23095688' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } #enroll-form #hear{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23095688' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23095688' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } /* Course Type — hero first field, highlighted until chosen */ #enroll-form .hyr-coursetype{ margin-bottom:16px; padding:12px 14px 14px; border:1px dashed rgba(9,86,136,.38); border-radius:14px; background:linear-gradient(135deg, rgba(9,86,136,.06), rgba(131,208,229,.12)); } #enroll-form .hyr-coursetype .hyr-label{ color:#064a77; font-size:12.5px; } #enroll-form .hyr-coursetype .hyr-ct-hint{ color:#46a598; font-weight:600; font-size:11.5px; } #enroll-form .hyr-coursetype select.is-highlight{ border-color:#095688 !important; background-color:#eef7fb !important; animation:spinSelPulse 1.8s ease-in-out infinite; } /* Course Type locked after one spin */ #enroll-form .hyr-coursetype.is-locked{ border-style:solid; border-color:rgba(70,165,152,.55); background:linear-gradient(135deg, rgba(70,165,152,.08), rgba(131,208,229,.10)); } #enroll-form .hyr-coursetype.is-locked .hyr-ct-hint{ color:#3f9f93; } #enroll-form #enroll_course_type.is-locked{ pointer-events:none; cursor:not-allowed; opacity:.96; border-color:rgba(70,165,152,.55) !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23095688' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 9-4 9 4-9 4z'/%3E%3Cpath d='M7 11v4c0 1.2 2.2 2.5 5 2.5s5-1.3 5-2.5v-4'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233f9f93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); } @media (max-width:480px){ .spin-popup{ padding:26px 16px 22px; } .spin-popup .pwc-stage{ transform:scale(.86); height:330px; } .spin-step-1{ padding:18px 12px; } .spin-step-2{ padding:16px 12px; } }