/*==========================================================
  Map Animator Pro: additions on top of the Jupiter template
  Loaded LAST, so everything here wins over theme/responsive.
  Only new class names are used: no template rule is overwritten
  except where explicitly noted.
==========================================================*/

/*--------------------------------------
  1. Eyebrow / kicker above a section title
---------------------------------------*/
.eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #1980FA;
    margin-bottom: 18px;
}

.text-white .eyebrow,
.eyebrow.light {
    color: #9ec5ff;
}

/*--------------------------------------
  2. Alternating feature rows (text + screenshot)
---------------------------------------*/
.feature-row {
    padding-top: 90px;
    padding-bottom: 90px;
    overflow: hidden;
}

.feature-row.tinted {
    background-color: #f6f8fd;
}

/* image on the left, text on the right */
.feature-row.reverse .row-flex {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.feature-row .text-box .title {
    font-size: 40px;
    line-height: 50px;
    margin-bottom: 22px;
}

.feature-row .text-box .box-icon {
    margin-bottom: 26px;
    width: 56px;
    height: 56px;
    line-height: 56px;
    font-size: 18px;
}

.feature-row .text-box p {
    font-size: 17px;
    line-height: 30px;
}

/*--------------------------------------
  3. Tick list used inside the feature rows
---------------------------------------*/
.tick-list {
    list-style: none;
    padding: 0;
    margin: 26px 0 0;
}

.tick-list li {
    position: relative;
    padding-left: 34px;
    margin-bottom: 14px;
    font-size: 16px;
    line-height: 26px;
    color: rgba(15, 29, 70, 0.7);
}

.tick-list li:before {
    content: "\f00c"; /* fa-check */
    font-family: FontAwesome;
    position: absolute;
    left: 0;
    top: 1px;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    font-size: 11px;
    color: #ffffff;
    background: #1980FA;
    border-radius: 50%;
}

.text-white .tick-list li {
    color: rgba(255, 255, 255, 0.85);
}

.text-white .tick-list li:before {
    background: #ffffff;
    color: #1980FA;
}

/*--------------------------------------
  4. Screenshot frame
---------------------------------------*/
.shot {
    margin: 0;
    position: relative;
}

.shot img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
    -webkit-box-shadow: 0 30px 60px rgba(15, 29, 70, 0.16);
    box-shadow: 0 30px 60px rgba(15, 29, 70, 0.16);
}

.shot figcaption {
    margin-top: 18px;
    font-size: 15px;
    line-height: 24px;
    color: rgba(15, 29, 70, 0.55);
    text-align: center;
}

.text-white .shot figcaption,
.shot.on-dark figcaption {
    color: rgba(255, 255, 255, 0.7);
}

/*--------------------------------------
  5. Provider strip under the hero
---------------------------------------*/
.provider-strip {
    padding: 46px 0 10px;
    text-align: center;
}

.provider-strip .strip-label {
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(15, 29, 70, 0.45);
    margin-bottom: 24px;
}

/*--------------------------------------
  6. Video / demo frame
---------------------------------------*/
.demo-frame {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #0f1d46;
    -webkit-box-shadow: 0 40px 80px rgba(15, 29, 70, 0.22);
    box-shadow: 0 40px 80px rgba(15, 29, 70, 0.22);
}

.demo-frame video,
.demo-frame img {
    width: 100%;
    display: block;
}

.demo-frame .demo-placeholder {
    height: 0;
    padding-bottom: 56.25%;
    position: relative;
}

.demo-frame .demo-placeholder span {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
    color: rgba(255, 255, 255, 0.75);
    font-size: 18px;
    letter-spacing: 0.5px;
}

/*--------------------------------------
  7. Spec table (requirements)
---------------------------------------*/
.spec-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    -webkit-box-shadow: 0 20px 45px rgba(15, 29, 70, 0.08);
    box-shadow: 0 20px 45px rgba(15, 29, 70, 0.08);
}

.spec-table th,
.spec-table td {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(15, 29, 70, 0.08);
    font-size: 16px;
    line-height: 26px;
    vertical-align: top;
    text-align: left;
}

.spec-table th {
    width: 240px;
    font-weight: 600;
    color: #0f1d46;
    background: #f6f8fd;
}

.spec-table td {
    color: rgba(15, 29, 70, 0.7);
}

.spec-table tr:last-child th,
.spec-table tr:last-child td {
    border-bottom: 0;
}

/*--------------------------------------
  8. FAQ list
---------------------------------------*/
.faq-item {
    background: #ffffff;
    border-radius: 12px;
    padding: 26px 30px;
    margin-bottom: 18px;
    -webkit-box-shadow: 0 14px 34px rgba(15, 29, 70, 0.07);
    box-shadow: 0 14px 34px rgba(15, 29, 70, 0.07);
}

.faq-item h4 {
    font-size: 19px;
    line-height: 28px;
    font-weight: 600;
    color: #0f1d46;
    margin: 0 0 10px;
}

.faq-item p {
    margin: 0;
    font-size: 16px;
    line-height: 27px;
    color: rgba(15, 29, 70, 0.68);
}

/*--------------------------------------
  9. Honest note box (licensing)
---------------------------------------*/
.note-box {
    border-left: 4px solid #1980FA;
    background: #f6f8fd;
    border-radius: 0 12px 12px 0;
    padding: 24px 28px;
    font-size: 16px;
    line-height: 27px;
    color: rgba(15, 29, 70, 0.72);
}

.note-box strong {
    color: #0f1d46;
}

/*--------------------------------------
  10. Price card tweaks (2 plans instead of 3)
---------------------------------------*/
.single-price .plan-list {
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
    text-align: left;
}

.single-price .plan-list li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 12px;
    font-size: 15px;
    line-height: 24px;
}

.single-price .plan-list li:before {
    content: "\f00c";
    font-family: FontAwesome;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 12px;
    color: #1980FA;
}

.price-note {
    margin-top: 22px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.75);
    text-align: center;
}

/*--------------------------------------
  11. Gallery captions (map styles carousel)
---------------------------------------*/
.produst-list-area .product-content .title {
    font-size: 20px;
}

.produst-list-area .product-content .rate {
    font-size: 14px;
    font-weight: 400;
    color: rgba(15, 29, 70, 0.5);
}

/*--------------------------------------
  12. Responsive
---------------------------------------*/
@media only screen and (max-width: 991px) {
    .feature-row {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .feature-row.reverse .row-flex {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }

    .feature-row .text-box .title {
        font-size: 32px;
        line-height: 42px;
    }

    .feature-row .shot {
        margin-top: 40px;
    }

    .spec-table th {
        width: 160px;
    }
}

@media only screen and (max-width: 767px) {
    .feature-row .text-box .title {
        font-size: 27px;
        line-height: 36px;
    }

    .spec-table th,
    .spec-table td {
        display: block;
        width: 100%;
        padding: 14px 18px;
    }
}

/*--------------------------------------
  13. Install steps (numbered, no image)
---------------------------------------*/
.info-area .info-box .number {
    display: inline-block;
    width: 54px;
    height: 54px;
    line-height: 54px;
    border-radius: 50%;
    background: #f0f4fd;
    color: #1980FA;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 22px;
}

.info-area .info-box .desc {
    font-size: 16px;
    line-height: 27px;
}

/*--------------------------------------
  14. Hero secondary line
---------------------------------------*/
.header-area .text-box small {
    font-size: 16px;
    opacity: 0.85;
}

/*--------------------------------------
  15. Subscribe intro paragraph
---------------------------------------*/
.subscribe-area .text-box p {
    font-size: 17px;
    line-height: 28px;
}

/*--------------------------------------
  16. Eyebrow + icon stacking inside feature rows
---------------------------------------*/
.feature-row .eyebrow {
    display: block;
}

.feature-row .text-box .box-icon {
    display: block;
}

/*--------------------------------------
  17. Header logo
  The SVG is the on-dark artwork (white wordmark, text already outlined), which
  suits both states of this menu: transparent over the hero gradient, and the
  solid blue affix bar.
---------------------------------------*/
.site-brand .brand-logo {
    padding: 8px 10px 8px 0;
    line-height: 0;
}

.site-brand .brand-logo img {
    height: 54px;
    width: auto;
    display: block;
}

@media only screen and (max-width: 768px) {
    .site-brand .brand-logo img {
        height: 36px;
    }
}

/*--------------------------------------
  18. Hero screenshot
  One static shot, sized to fill the right half of the hero. Above 1200px it is
  allowed to spill past the container towards the edge of the viewport, which
  is what makes it read as large; below that it stays inside its column so it
  can never push a horizontal scrollbar.
---------------------------------------*/
.hero-shot {
    margin: 0;
    line-height: 0;
}

.hero-shot img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}

/* The container caps at 1170px, so the shot can only spill by (viewport-1170)/2
   per side. 22% of the column is ~122px, which needs about 1420px of viewport;
   the spill only switches on at 1500px, so it always has room and nothing needs
   clipping. Do NOT add overflow-x here: with overflow-y left visible the browser
   promotes the header to a scroll container, which both shows a stray vertical
   scrollbar and re-anchors the diagonal :after shape to the scrollport instead
   of the end of the section. */

@media only screen and (min-width: 1500px) {
    .hero-shot img {
        width: 122%;
        max-width: none;
        margin-right: -22%;
    }
}

/*--------------------------------------
  19. Looping clips inside a .shot
  Same frame as a screenshot, so a section can hold either without the layout
  moving. The aspect-ratio box keeps the space reserved before the poster
  paints, which stops the page from jumping as clips load.
---------------------------------------*/
.shot video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
    background: #0f1d46;
    -webkit-box-shadow: 0 30px 60px rgba(15, 29, 70, 0.16);
    box-shadow: 0 30px 60px rgba(15, 29, 70, 0.16);
}

/*--------------------------------------
  20. Style gallery intro
---------------------------------------*/
.gallery-intro {
    margin-bottom: 46px;
}

.gallery-intro .title {
    font-size: 34px;
    line-height: 44px;
    font-weight: 700;
    color: #0f1d46;
    margin-bottom: 18px;
}

.gallery-intro p {
    font-size: 17px;
    line-height: 29px;
}

.produst-list-area .slide-item .product-image img {
    border-radius: 10px;
}

/*--------------------------------------
  21. Preloader
  The Lottie logo is drawn in white and periwinkle, the same artwork the plugin
  shows while it downloads maps, so the screen behind it carries the hero
  gradient rather than the template's white: on white the mark would vanish,
  and this way the preloader dissolves straight into the header.
---------------------------------------*/
.preloader {
    background-color: #5040F4;
    background-image: linear-gradient(to right, #5040F4 0%, #31B4FE 100%);
}

.preloader-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    /* the artwork is 396x342, so the box needs both sides: Lottie sizes its SVG
       to the container, and a container with no height renders nothing */
    width: 260px;
    height: 215px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.preloader-logo svg {
    display: block;
    /* the template styles ".preloader svg" for its infinity mark: absolute at
       50%/50% with a compensating translate. Lottie writes its own inline
       transform over that translate, so the offset would survive and push the
       logo down and right. Reset the lot. */
    position: static;
    left: auto;
    top: auto;
    max-width: none;
    width: 100%;
    height: 100%;
    stroke: none;
    fill: none;
}

@media only screen and (max-width: 767px) {
    .preloader-logo {
        width: 180px;
        height: 149px;
    }
}

/*--------------------------------------
  22. Showcase carousel clips
  Same frame as the still images the carousel was built for.
---------------------------------------*/
.single-image video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    background: #0f1d46;
}

/*--------------------------------------
  23. The diagonal under the header
  .topshape draws it with a "to right top" gradient cut at 50%. The angle of
  that cut is set by the box's own proportions, so a fixed 200px height means
  the diagonal gets steeper as the window narrows: on a phone it swung up
  across the hero screenshot. 200px is 13.9% of the 1440px design width, so
  expressing it in vw keeps the desktop look identical and holds the same
  angle at every width. Capped so it cannot swallow the header on very wide
  screens.
---------------------------------------*/
.header-area .topshape {
    height: 13.9vw;
    max-height: 260px;
}

/*--------------------------------------
  24. Anchor the diagonal's pseudo-element
  .topshape:after is absolutely positioned but the template never gives it a
  left, so it falls back to its static position. Under 992px the header is
  centred, and a static position in centred text starts at the middle of the
  line: the shape began half way across and ran off the right edge, which both
  broke the diagonal and made the page 1.5x wider than the window. Pinning it
  to the top left costs nothing on desktop, where the static position already
  happened to be 0.
---------------------------------------*/
.topshape:after,
.topshape-botom:after,
.productShape1inner:after,
.productShape2inner:after {
    left: 0;
    top: 0;
}

/*--------------------------------------
  25. Map data providers strip
  A seamless marquee, no JavaScript: the list is in the markup twice and the
  track travels exactly -50%, so the moment it snaps back the second copy is
  already where the first one was. The viewport is masked at both ends, which is
  what stops a name from being cut in half at the edge. It parks on hover so a
  name can actually be read, and stands still for anyone who asked their system
  for less motion.
---------------------------------------*/
.provider-viewport {
    overflow: hidden;
    /* fade the two ends instead of clipping a wordmark mid-letter */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 90px,
                        #000 calc(100% - 90px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 90px,
                #000 calc(100% - 90px), transparent 100%);
}

.provider-track {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    -webkit-animation: provider-scroll 46s linear infinite;
    animation: provider-scroll 46s linear infinite;
}

.provider-strip:hover .provider-track {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

.provider-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.provider {
    padding: 0 34px;
    white-space: nowrap;
    line-height: 1;
}

.provider span {
    font-size: 21px;
    font-weight: 600;
    color: #c2c9d6;
}

/* when the real logo files arrive, an <img> in place of the <span> lands here */
.provider img {
    display: block;
    height: 30px;
    width: auto;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    opacity: 0.55;
}

@-webkit-keyframes provider-scroll {
    from { -webkit-transform: translateX(0); }
    to   { -webkit-transform: translateX(-50%); }
}

@keyframes provider-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media only screen and (max-width: 767px) {
    .provider span { font-size: 17px; }
    .provider { padding: 0 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .provider-track {
        -webkit-animation: none;
        animation: none;
    }
    .provider-viewport { overflow-x: auto; }
}

/*--------------------------------------
  26. Carousel dots
  The template only styles dots on a .paginate carousel, and only for a light
  background: on the showcase the active dot's blue would land on blue.
---------------------------------------*/
.product-slide .owl-controls,
.product-slider-2 .owl-controls {
    margin-top: 30px;
}

.product-slider-2 .owl-controls .owl-dot span {
    background: rgba(255, 255, 255, 0.4);
}

.product-slider-2 .owl-controls .owl-dot.active span {
    background-color: #ffffff;
}

/*--------------------------------------
  27. Section icon on narrow screens
  Below 992px the template centres .text-box, but the round section icon is
  display:block (section 16, so on desktop it stacks above the eyebrow instead of
  sitting on its line), and a block box ignores text-align. It stayed pinned to
  the left while the eyebrow, the title and the copy around it were centred.
---------------------------------------*/
@media only screen and (max-width: 992px) {
    .feature-row .text-box .box-icon {
        margin-left: auto;
        margin-right: auto;
    }
}

/*--------------------------------------
  28. Footer brand
  The first footer column used to open with the product name as a heading; it
  now carries the same white-on-dark logo as the menu. The height matches the
  22px heading it replaced, plus the margin that heading had, so the paragraph
  under it keeps its old rhythm.
---------------------------------------*/
.footer-brand {
    display: block;
    height: 42px;
    width: auto;
    margin-bottom: 20px;
}

/*--------------------------------------
  29. Footer columns on narrow screens
  Below 992px the four columns stop sitting side by side, and a left-aligned
  block under a centred page reads as a stray. Centre the whole column, logo
  included: the social row is made of inline-block links, so it follows on its
  own without a rule of its own.
---------------------------------------*/
@media only screen and (max-width: 992px) {
    .footer-bottom .widget {
        text-align: center;
    }

    .footer-brand {
        margin-left: auto;
        margin-right: auto;
    }
}

/*--------------------------------------
  30. Legal pages (privacy / terms / cookie policy)
  These are read, not skimmed like the marketing sections, so they get the
  theme's body copy at a comfortable line length instead of the full-width
  section-padding blocks (150px top/bottom - built for hero imagery, not for a
  page that's all text). .page-title is the template's own inner-page banner
  component (helper.css), reused as-is.
---------------------------------------*/
.legal-content {
    padding: 70px 0 120px;
}
.legal-content .legal-wrap {
    max-width: 760px;
    margin: 0 auto;
}
.legal-content h2 {
    font-size: 26px;
    font-weight: 700;
    color: #0F1D46;
    margin: 50px 0 16px;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 {
    font-size: 19px;
    font-weight: 700;
    color: #0F1D46;
    margin: 30px 0 12px;
}
.legal-content p, .legal-content li {
    color: rgba(40, 51, 80, 0.75);
    line-height: 1.8;
}
.legal-content ul, .legal-content ol {
    margin: 0 0 20px;
    padding-left: 22px;
}
.legal-content .meta-line {
    font-size: 14px;
    color: rgba(40, 51, 80, 0.5);
    margin-bottom: 40px;
}
/* Marks a placeholder Marco still has to fill in before launch - the same
   "SET THE ..." convention used elsewhere, just visible so it's impossible to
   ship by accident. Remove the class (not just the text) once it's filled in. */
.legal-content .todo {
    background: rgba(255, 193, 7, 0.15);
    border: 1px dashed rgba(191, 143, 0, 0.6);
    border-radius: 6px;
    padding: 2px 8px;
}

/*--------------------------------------
  31. Tutorials page
  A grid of cards, each a click-to-load YouTube embed: the iframe is only
  created on click, so the page ships 13 thumbnails instead of 13 embedded
  players (lighter, and no autoplaying video anyone didn't ask for).
---------------------------------------*/
.tutorials-content {
    padding: 70px 0 120px;
}

.tutorials-content .gallery-intro {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.tutorial-card {
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 40px;
    -webkit-box-shadow: 0 20px 45px rgba(15, 29, 70, 0.08);
    box-shadow: 0 20px 45px rgba(15, 29, 70, 0.08);
}

.tutorial-thumb {
    position: relative;
    display: block;
    width: 100%;
    padding-bottom: 56.25%;
    background: #0f1d46 center center / cover no-repeat;
    cursor: pointer;
    border: 0;
}

/* A div standing in for a button (see tutorials.html for why) still needs its
   own focus ring, since it carries none of the browser's built-in control
   styling. */
.tutorial-thumb:focus {
    outline: 3px solid #1980FA;
    outline-offset: 2px;
}

.tutorial-thumb .play-badge {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    border-radius: 50%;
    background: rgba(15, 29, 70, 0.75);
    color: #ffffff;
    font-size: 20px;
    line-height: 60px;
    text-align: center;
    -webkit-transition: background-color 0.2s, -webkit-transform 0.2s;
    transition: background-color 0.2s, transform 0.2s;
}

/* nudge the glyph so its visual centre (not its box centre) sits in the middle */
.tutorial-thumb .play-badge i {
    margin-left: 3px;
}

.tutorial-thumb:hover .play-badge {
    background-color: #1980FA;
    -webkit-transform: scale(1.08);
    transform: scale(1.08);
}

.tutorial-thumb .duration-badge {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(15, 29, 70, 0.8);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.tutorial-thumb iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.tutorial-body {
    padding: 24px 26px 28px;
}

.tutorial-body .chapter-tag {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #1980FA;
    margin-bottom: 8px;
}

.tutorial-body h3 {
    font-size: 19px;
    line-height: 27px;
    font-weight: 700;
    color: #0f1d46;
    margin: 0 0 10px;
}

.tutorial-body p {
    font-size: 15px;
    line-height: 25px;
    color: rgba(15, 29, 70, 0.68);
    margin: 0;
}

@media only screen and (max-width: 767px) {
    .tutorials-content {
        padding: 50px 0 80px;
    }
}

/*--------------------------------------
  32. Contact form (replaces the old newsletter signup)
---------------------------------------*/
.contact-form {
    text-align: left;
}

.contact-field {
    margin-bottom: 20px;
}

.contact-form .form-input {
    /* Overrides theme.css's ".subscribe-area .form-input", which sizes for
       a single inline email field - these stack full-width instead. */
    width: 100%;
    margin-right: 0;
    box-sizing: border-box;
}

.contact-form textarea.form-input {
    resize: vertical;
    min-height: 120px;
    font-family: inherit;
}

.contact-form .submit {
    width: 100%;
    text-align: center;
}

.contact-form #contact-status {
    margin-top: 16px;
    text-align: center;
}

/* Spam honeypot: present in the markup for bots to fill in, invisible and
   unreachable for real visitors (off-screen, not just display:none, since
   some bots skip fields hidden that way). */
.contact-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/*--------------------------------------
    License Modal (post-checkout)
---------------------------------------*/
.license-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 29, 70, 0.72);
    padding: 20px;
}

.license-modal[hidden] {
    display: none;
}

.license-modal-box {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: #ffffff;
    border-radius: 10px;
    padding: 44px 32px 36px;
    text-align: center;
    box-shadow: 0 30px 70px rgba(15, 29, 70, 0.35);
}

.license-modal-box h3 {
    color: #0f1d46;
    margin-bottom: 12px;
}

.license-modal-box p {
    color: #5b6478;
    margin-bottom: 6px;
}

.license-spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto 20px;
    border-radius: 50%;
    border: 4px solid #e7ecfb;
    border-top-color: #1980FA;
    animation: license-spin 0.8s linear infinite;
}

@keyframes license-spin {
    to { transform: rotate(360deg); }
}

.license-code-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 14px 0 18px;
    flex-wrap: wrap;
}

.license-code-row code {
    display: inline-block;
    background: #f2f5fc;
    color: #0f1d46;
    border: 1px solid #dbe3f7;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 15px;
    letter-spacing: 0.5px;
    user-select: all;
}

.license-code-row .bttn-3 {
    padding: 10px 18px;
}

.license-modal-note {
    font-size: 13px;
}

.license-modal-download {
    display: inline-block;
    margin-top: 14px;
}

.license-modal-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: #9aa4bd;
    cursor: pointer;
}

.license-modal-close:hover {
    color: #0f1d46;
}