/* Shared Product Slide CSS */

/* Locale-specific fonts */
:lang(zh-tw) body {
    font-family: "Noto Sans TC", sans-serif;
}

:lang(zh-cn) body {
    font-family: "Noto Sans SC", sans-serif;
}

:lang(ja) body {
    font-family: "Noto Sans JP", sans-serif;
}

:lang(en) body,
:lang(en-us) body {
    font-family: "Roboto", sans-serif;
}

/* Default fallback */
body {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

/* Allows text selection for content, but keeps buttons non-selectable */
.slide-text,
.slide-title,
.slide-subtitle,
.slide-description {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Keep buttons and navigation non-selectable */
button,
.prev,
.next,
.dot {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.slideshow-container {
    width: 100%;
    position: relative;
    margin: auto;
    overflow: hidden;
}

.slides-wrapper {
    white-space: nowrap;
    transition: transform 0.5s ease-in-out;
}

.slide {
    width: 100%;
    height: 550px;
    display: inline-block;
    position: relative;
    cursor: pointer;
}

/* Custom Background Colors */
.slide.ssdsuite {
    background-color: #0e87ff;
}

.slide.backuptogo2 {
    background-color: #091b33;
}

.slide.clonedrive2 {
    background-color: #1c3120;
}

.slide.securedriveex2 {
    background-color: #640A0A;
}

.slide-content-wrapper {
    display: flex;
    height: 100%;
    max-width: 1300px;
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
}

.slide-image {
    width: var(--image-width, 50%);
    height: 100%;
    display: flex;
    justify-content: right;
    padding: 20px;
    box-sizing: border-box;
    min-width: 0;
    flex-shrink: 1;
}

.slide-image img {
    max-height: 500px;
    height: auto;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    box-sizing: border-box;
}

.slide-text {
    width: var(--text-width, 50%);
    color: white;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
    height: 100%;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    min-width: 0;
    white-space: normal;
}

/* Title Styles */
.slide-title {
    font-size: var(--title-size, 2.5em);
    font-weight: var(--title-weight, bold);
    font-style: var(--title-style, normal);
    text-align: inherit;
    margin-bottom: 15px;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
}

/* Subtitle Styles */
.slide-subtitle {
    font-size: var(--subtitle-size, 1.1em);
    font-weight: var(--subtitle-weight, bold);
    font-style: var(--subtitle-style, normal);
    margin-top: 6px;
    margin-bottom: 4px;
    text-align: inherit;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
}

/* Description Styles */
.slide-description {
    font-size: var(--description-size, 0.9em);
    font-weight: var(--description-weight, normal);
    font-style: var(--description-style, normal);
    margin-top: 4px;
    margin-bottom: 8px;
    text-align: inherit;
    line-height: 1.3;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
    padding-left: var(--description-padding-left, 2em);
}

.slide-description.no-indent {
    --description-padding-left: 0;
    padding-left: 0;
}

/* Font Style Variant Classes */
.slide-title.bold {
    --title-weight: bold;
}

.slide-title.normal {
    --title-weight: normal;
}

.slide-title.italic {
    --title-style: italic;
}

.slide-subtitle.bold {
    --subtitle-weight: bold;
}

.slide-subtitle.normal {
    --subtitle-weight: normal;
}

.slide-subtitle.italic {
    --subtitle-style: italic;
}

.slide-description.bold {
    --description-weight: bold;
}

.slide-description.normal {
    --description-weight: normal;
}

.slide-description.italic {
    --description-style: italic;
}

/* Image and Text Width Classes */
.slide-image.width-30 {
    --image-width: 30%;
}

.slide-image.width-35 {
    --image-width: 35%;
}

.slide-image.width-40 {
    --image-width: 40%;
}

.slide-image.width-45 {
    --image-width: 45%;
}

.slide-image.width-50 {
    --image-width: 50%;
}

.slide-image.width-55 {
    --image-width: 55%;
}

.slide-image.width-60 {
    --image-width: 60%;
}

.slide-image.width-65 {
    --image-width: 65%;
}

.slide-image.width-70 {
    --image-width: 70%;
}

.slide-text.width-30 {
    --text-width: 30%;
}

.slide-text.width-35 {
    --text-width: 35%;
}

.slide-text.width-40 {
    --text-width: 40%;
}

.slide-text.width-45 {
    --text-width: 45%;
}

.slide-text.width-50 {
    --text-width: 50%;
}

.slide-text.width-55 {
    --text-width: 55%;
}

.slide-text.width-60 {
    --text-width: 60%;
}

.slide-text.width-65 {
    --text-width: 65%;
}

.slide-text.width-70 {
    --text-width: 70%;
}

/* Text Alignment Classes */
.slide-text.align-left {
    text-align: left;
    margin-left: 0;
    margin-right: auto;
}

.slide-text.align-center {
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}

.slide-text.align-right {
    text-align: left;
    margin-left: auto;
    margin-right: 0;
}

/* Text Size Classes - Title */
.slide-title.size-12 {
    --title-size: 12px;
}

.slide-title.size-14 {
    --title-size: 14px;
}

.slide-title.size-16 {
    --title-size: 16px;
}

.slide-title.size-18 {
    --title-size: 18px;
}

.slide-title.size-20 {
    --title-size: 20px;
}

.slide-title.size-22 {
    --title-size: 22px;
}

.slide-title.size-24 {
    --title-size: 24px;
}

.slide-title.size-26 {
    --title-size: 26px;
}

.slide-title.size-28 {
    --title-size: 28px;
}

.slide-title.size-30 {
    --title-size: 30px;
}

.slide-title.size-32 {
    --title-size: 32px;
}

.slide-title.size-34 {
    --title-size: 34px;
}

.slide-title.size-36 {
    --title-size: 36px;
}

.slide-title.size-38 {
    --title-size: 38px;
}

.slide-title.size-40 {
    --title-size: 40px;
}

.slide-title.size-42 {
    --title-size: 42px;
}

.slide-title.size-44 {
    --title-size: 44px;
}

.slide-title.size-46 {
    --title-size: 46px;
}

.slide-title.size-48 {
    --title-size: 48px;
}

.slide-title.size-50 {
    --title-size: 50px;
}

.slide-title.size-52 {
    --title-size: 52px;
}

.slide-title.size-54 {
    --title-size: 54px;
}

.slide-title.size-56 {
    --title-size: 56px;
}

.slide-title.size-58 {
    --title-size: 58px;
}

.slide-title.size-60 {
    --title-size: 60px;
}

.slide-title.size-64 {
    --title-size: 64px;
}

/* Text Size Classes - Subtitle */
.slide-subtitle.size-12 {
    --subtitle-size: 12px;
}

.slide-subtitle.size-14 {
    --subtitle-size: 14px;
}

.slide-subtitle.size-16 {
    --subtitle-size: 16px;
}

.slide-subtitle.size-18 {
    --subtitle-size: 18px;
}

.slide-subtitle.size-20 {
    --subtitle-size: 20px;
}

.slide-subtitle.size-22 {
    --subtitle-size: 22px;
}

.slide-subtitle.size-24 {
    --subtitle-size: 24px;
}

.slide-subtitle.size-26 {
    --subtitle-size: 26px;
}

.slide-subtitle.size-28 {
    --subtitle-size: 28px;
}

.slide-subtitle.size-30 {
    --subtitle-size: 30px;
}

.slide-subtitle.size-32 {
    --subtitle-size: 32px;
}

.slide-subtitle.size-36 {
    --subtitle-size: 36px;
}

.slide-subtitle.size-40 {
    --subtitle-size: 40px;
}

.slide-subtitle.size-48 {
    --subtitle-size: 48px;
}

/* Text Size Classes - Description */
.slide-description.size-12 {
    --description-size: 12px;
}

.slide-description.size-14 {
    --description-size: 14px;
}

.slide-description.size-16 {
    --description-size: 16px;
}

.slide-description.size-18 {
    --description-size: 18px;
}

.slide-description.size-20 {
    --description-size: 20px;
}

.slide-description.size-22 {
    --description-size: 22px;
}

.slide-description.size-24 {
    --description-size: 24px;
}

.slide-description.size-26 {
    --description-size: 26px;
}

.slide-description.size-28 {
    --description-size: 28px;
}

.slide-description.size-30 {
    --description-size: 30px;
}

.slide-description.size-32 {
    --description-size: 32px;
}

.slide-description.size-36 {
    --description-size: 36px;
}

.slide-description.size-40 {
    --description-size: 40px;
}

/* Backward Compatibility */
.slide-content-bold {
    font-size: 1.1em;
    margin-top: 6px;
    font-weight: bold;
    text-align: left;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
}

.slide-content {
    margin-top: 4px;
    font-size: 0.9em;
    font-weight: normal;
    text-align: left;
    line-height: 1.3;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
}

.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    background-color: rgba(0, 0, 0, 0.4);
    border: none;
    border-radius: 3px;
    z-index: 10;
}

.next {
    right: 0;
}

.prev {
    left: 0;
}

.dots {
    text-align: center;
    padding: 10px 0;
}

.dot {
    height: 12px;
    width: 12px;
    margin: 0 4px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
}

.dot.active {
    background-color: #717171;
}

@media screen and (max-width: 768px) {
    .slide-content-wrapper {
        flex-direction: column;
    }

    .slide-image,
    .slide-text {
        width: 100%;
        height: auto;
    }

    .slide {
        height: 550px;
    }

    .slide-title {
        font-size: 1.4em;
    }

    .slide-content {
        font-size: 0.9em;
    }
}