/* ============================================================
 * StableGrip Standalone — style.css
 * Font: Source Sans 3 (Google Fonts)
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  --font-body: "Source Sans 3", sans-serif;
  --color-text: rgb(33, 37, 41);
  --color-text-muted: rgb(108, 117, 125);
  --color-text-dark: rgb(42, 42, 42);
  --color-green: rgb(22, 101, 52);
  --color-red: rgb(255, 0, 0);
  --color-link: rgb(13, 110, 253);
  --color-danger: rgb(220, 53, 69);
  --color-bg: rgb(255, 255, 255);
  --color-bg-blue-50: rgb(239, 246, 255);
  --color-bg-gray: rgb(247, 247, 247);
  --color-bg-yellow-50: rgb(254, 252, 232);
  --color-bg-warning: rgb(255, 243, 205);
  --color-bg-dark: rgb(33, 37, 41);
  --color-bg-green: rgb(0, 204, 7);
  --color-bg-gradient-green-start: rgb(49, 205, 19);
  --color-bg-gradient-green-end: rgb(40, 163, 17);
  --color-bg-green-circle: rgb(113, 195, 65);
  --color-bg-yellow-400: rgb(250, 204, 21);
  --color-border-warning: rgb(255, 236, 181);
  --color-border-success: rgb(25, 135, 84);
  --color-border-warning-dashed: rgb(255, 193, 7);
  --color-border-danger: rgb(220, 53, 69);
  --color-border-secondary: rgb(222, 226, 230);
  --container-max: 720px;
  --background: #ffffff;
  --foreground: rgb(33, 37, 41);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }

body {
  margin: 0; padding: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: 16px; line-height: 24px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
a { color: var(--color-link); text-decoration: none; }
a:hover { text-decoration: underline; }
p { margin: 0 0 16px; }
h1,h2,h3,h4,h5,h6 { margin: 0; }
ul { list-style: none; padding: 0; margin: 0; }

/* Container */
.sg-container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 12px; }

/* Typography */
.sg-h1 { font-size: 29.5px; font-weight: 700; line-height: 35.4px; margin: 0 0 8px; color: var(--color-text); }
.sg-h2 { font-size: 25.7px; font-weight: 700; line-height: 30.84px; margin: 24px 0 8px; color: var(--color-text); }
.sg-body p { font-size: 17px; font-weight: 400; line-height: 1.3; margin: 0 0 16px; color: var(--color-text); }

/* Alert */
.sg-alert-warning { background-color: var(--color-bg-warning); border: 1px solid var(--color-border-warning); border-radius: 6px; padding: 16px; margin-bottom: 16px; color: var(--color-text); }

/* Testimonial */
.sg-testimonial { background-color: var(--color-bg-blue-50); padding: 16px; margin-bottom: 24px; }

/* Blockquote */
.sg-blockquote { font-size: 19.2px; line-height: 28.8px; font-weight: 500; font-style: italic; color: var(--color-text-muted); background-color: var(--color-bg-gray); border-left: 5px solid var(--color-border-success); padding: 16px; margin: 0 0 16px; }

/* CTA Buttons */
.sg-cta-green { display: inline-flex; align-items: center; justify-content: center; background-color: var(--color-bg-green); color: #fff; font-size: 19.2px; font-weight: 500; line-height: 28.8px; padding: 16px 48px; border-radius: 6px; text-decoration: none; text-align: center; transition: opacity 0.2s ease; }
.sg-cta-green:hover { opacity: 0.9; text-decoration: none; color: #fff; }

.sg-cta-gradient { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(to right, var(--color-bg-gradient-green-start), var(--color-bg-gradient-green-end)); color: #fff; font-size: 19.2px; font-weight: 700; line-height: 28.8px; padding: 16px; border-radius: 6px; text-decoration: none; width: 100%; }
.sg-cta-gradient:hover { opacity: 0.9; text-decoration: none; color: #fff; }

/* Offer card */
.sg-offer-card { border: 2px dashed var(--color-border-warning-dashed); border-radius: 6px; background-color: var(--color-bg-yellow-50); padding: 16px; margin: 24px 0; }
@media (min-width: 768px) { .sg-offer-card { padding: 48px; } }

/* Comments */
.sg-comments-wrapper { background-color: var(--color-bg-gray); padding: 16px; border-radius: 6px; margin-bottom: 16px; }
.sg-comment { background-color: #fff; border-radius: 6px; padding: 16px; margin-bottom: 16px; }
.sg-comment:last-child { margin-bottom: 0; }

/* Spin wheel */
.sg-spin-wrapper { border: 3px solid var(--color-border-danger); border-radius: 12px; box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15); overflow: hidden; padding: 16px 8px; text-align: center; }
.sg-wheel-container { position: relative; max-width: 400px; margin: 0 auto; }
.sg-wheel-img { max-width: 100%; transition: transform 4s ease-in-out; }
.sg-wheel-cursor { position: absolute; width: 150px; height: 150px; top: 49%; left: 50%; transform: translate(-50%, -50%); }
.sg-cursor-text { position: absolute; z-index: 2; display: inline-block; width: 70px; height: 70px; line-height: 70px; cursor: pointer; border-radius: 50%; font-family: "Inter", sans-serif; text-align: center; font-size: 12px; user-select: none; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: rgba(255,255,255,1) 0 -2px 0 inset, rgba(255,255,255,1) 0 2px 0 inset, rgba(0,0,0,0.4) 0 0 5px; background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(234,234,234,1) 100%); }
.sg-cursor-text:active { box-shadow: rgba(0,0,0,0.4) 0 0 5px inset; }

/* Popup */
.sg-popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 99; display: none; align-items: center; justify-content: center; }
.sg-popup-window { max-width: 400px; width: 100%; padding: 70px 10px 20px; background: #fff; position: relative; border-radius: 12px; text-align: center; animation: pop-up-appear 0.7s ease; }
.sg-popup-window::before { content: ""; position: absolute; width: 110px; height: 110px; top: -55px; left: 50%; transform: translateX(-50%); background-color: var(--color-bg-green-circle); border-radius: 50%; animation: pop-up-appear-before 0.5s ease 0.6s backwards; }
.sg-popup-window::after { content: ""; position: absolute; width: 50px; height: 20px; top: -20px; left: 50%; transform: translateX(-50%) rotate(-45deg); border-bottom: 4px solid #fff; border-left: 4px solid #fff; animation: pop-up-appear-after 0.5s ease 0.6s backwards; }
.sg-popup-heading { display: block; font-size: 31px; margin-bottom: 20px; font-weight: 700; }
.sg-popup-text { font-size: 22px; line-height: 30px; text-align: center; }
.sg-popup-button { display: block; text-transform: uppercase; text-decoration: none; padding: 10px 20%; font-size: 20px; border-radius: 5px; background-color: var(--color-bg-green-circle); color: #fff; border: none; cursor: pointer; margin: 15px auto 0; }

/* Discount form */
.sg-discount-form { background-color: var(--color-bg-blue-50); border: 1px dashed rgb(59, 130, 246); padding: 16px; display: none; }
.sg-discount-inner { display: flex; flex-direction: column; gap: 16px; align-items: center; }
@media (min-width: 768px) { .sg-discount-inner { flex-direction: row; } .sg-discount-img-col { width: 33.333%; } .sg-discount-text-col { width: 66.666%; } }
.sg-discount-text-col { text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; }

/* Organic ads */
.sg-orgads-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .sg-orgads-grid { grid-template-columns: 1fr 1fr 1fr; } }
.sg-orgads-item { margin: 12px 0; }
.sg-orgads-item-inner { display: grid; grid-template-columns: 1fr 1fr; }
@media (min-width: 768px) { .sg-orgads-item-inner { grid-template-columns: 1fr; } }
.sg-orgads-title { font-size: 16px; font-weight: 600; line-height: 18px; color: var(--color-text-dark); text-decoration: none; }
.sg-orgads-title:hover { text-decoration: underline; }

/* Footer */
.sg-footer { background-color: var(--color-bg-dark); color: #fff; padding: 48px 40px 16px; margin-top: 48px; }
.sg-footer a { color: #fff; text-decoration: none; }
.sg-footer a:hover { text-decoration: underline; }
.sg-footer-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 768px) { .sg-footer-grid { grid-template-columns: 1fr 1fr 1fr 2fr; } }

/* Offer features */
.sg-offer-features { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.sg-offer-feature { display: inline-flex; align-items: center; gap: 8px; justify-content: center; }

/* Animations */
@keyframes pulse-green { 0%, 100% { box-shadow: 0 0 0 0 rgba(49,205,19,0.7); } 70% { box-shadow: 0 0 0 10px rgba(49,205,19,0); } }
.sg-pulse { animation: pulse-green 2s infinite; }
@keyframes super-rotation { 70% { transform: rotate(1783deg); } 100% { transform: rotate(1774deg); } }
.sg-super-rotation { animation: super-rotation 7s ease-in-out forwards; }
@keyframes pop-up-appear { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
@keyframes pop-up-appear-before { from { opacity: 0; transform: translateX(-50%) scale(0); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes pop-up-appear-after { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } }

/* Responsive */
@media (max-width: 767px) {
  .sg-h1 { font-size: 24px; line-height: 30px; }
  .sg-h2 { font-size: 22px; line-height: 28px; }
}