/*
Security Page Template Styles
Template: page-security.php
*/

/* Base Styles - Use CSS variables from style.css */
body.page-template-page-security {
    padding-top: 80px;
}

.main {
    position: relative;
}

.card-vector-top {
    position: absolute;
    z-index: -1;
    right: 0;
}

.card-vector-main {
    position: absolute;
    z-index: -1;
    top: 18%;
}

.card-vector-d {
    right: 0;
}

.card-vector-m {
    display: none;
}

.heading-wrapper {
    overflow: hidden;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.card-sec-meas {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    margin-top: 7rem;
}



.card-sec-meas-header {
    padding: 0 2rem;
    text-align: center;
    margin-top: 3rem;
}

.card-sec-meas-header h1 {
    color: var(--accent-primary);
    font-size: 1.75em;
    font-weight: 700;
}

.card-sec-meas-header p {
    font-size: 1em;
    font-weight: 600;
    color: var(--text-body);
    line-height: 1.8;
}

.card-sec-recom {
    width: 50%;
    height: 860px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.btn-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3rem;
    padding: 0 2rem;
    width: 100%;
}

.btn-wrapper button {
    font-family: inherit;
    font-size: 1em;
    cursor: pointer;
    padding: 1rem;
    color: #fff;
    border-radius: 10px;
    border: none;
    transition: all 0.3s ease;
    font-weight: 500;
    box-shadow: var(--shadow-subtle);
}

.btn-wrapper .download-pdf-btn {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
}

.btn-wrapper .download-pdf-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

.btn-wrapper a {
    width: 50%;
    display: flex;
    text-decoration: none;
}

.btn-wrapper a:hover {
    text-decoration: none;
}

.btn-wrapper a button {
    width: 100%;
}

.btn-wrapper button:not(.download-pdf-btn) {
    background-color: #ffc600;
}

.btn-wrapper button:not(.download-pdf-btn):hover {
    background-color: #e6b300;
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

.card-details-sec-meas-wrapper {
    width: 100%;
    position: relative;
    margin: 6rem auto auto auto;
}

.card-details-sec-meas-wrapper h2 {
    text-align: center;
    color: var(--accent-primary);
    font-size: 1.75em;
    font-weight: 700;
    margin-bottom: 2rem;
}

.details-sec-meas {
    display: flex;
    gap: 20px;
}
.card-skeleton {
    width: 100%;
    height: 384px;
    animation-duration: 1.8s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background-color: var(--card-bg);
    background: linear-gradient(to right, var(--card-bg) 15%, var(--border-color) 20%, var(--border-color) 30%, var(--card-bg) 15%);
    background-size: 1000px 1000px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

@keyframes placeHolderShimmer {
    0% { background-position: -468px 0; }
    100% { background-position: 468px 0; }
}
.card-details-sec-meas-wallet {
    display: flex;
    width: 17%;
    height: 320px;
    -webkit-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;
    justify-content: center;
    padding: 1.3rem 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    cursor: pointer;
    border-bottom-right-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-subtle);
}

.card-details-sec-meas-wallet:hover {
    box-shadow: var(--shadow-card);
}
.active-card-details {
    display: initial !important;
    width: 56%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 20px;
    box-shadow: var(--shadow-card);
}

.active-details-sec-meas h2 {
    font-size: 1.75em;
    color: var(--text-primary);
}

.active-details-sec-meas {
    padding: 0 1rem !important;
    display: inherit !important;
    writing-mode: inherit !important;
    transform: rotate(0) !important;
}

.active-flex-wallet {
    padding: 0 1rem !important;
    margin-top: 2.5rem;
    animation: textanimation 1.1s linear;
}

@keyframes textanimation {
    0% { height: -100%; width: -100%; opacity: 0; }
    99% { height: -100%; width: -100%; opacity: 0; }
    100% { height: auto; width: auto; opacity: 1; }
}

.active-flex-wallet p {
    display: block !important;
    font-size: 1rem;
    color: var(--text-body);
    line-height: 1.8;
}
.d-flex-wallet span {
    font-size: 60px;
    font-weight: bold;
    opacity: 0.5;
    color: var(--text-secondary);
}

.card-details-sec-meas-wallet > div:last-child {
    font-weight: 600;
}

.card-details-sec-meas-wallet > div:last-child p {
    display: none;
    color: var(--text-body);
}

.d-flex-wallet h2 {
    font-weight: 700;
    margin-bottom: 0.5rem;
    font-size: 1.25em;
    display: flex;
    color: var(--text-primary);
}

.d-flex-wallet {
    display: flex;
    align-items: center;
    writing-mode: vertical-lr;
    transform: rotate(-180deg);
}
.purchase-benefits-wrapper h2 {
    text-align: center;
    font-size: 1.75em;
    color: var(--accent-primary);
    font-weight: 700;
    margin-bottom: 2rem;
}

.purchase-benefits-wrapper {
    margin-top: 6rem;
}

.purchase-benefits {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 30px;
}

.card-purchase-benefits div:first-child {
    border-radius: 35px;
    padding: 1.5rem;
}

.purchase-benefits div:first-child div:nth-child(1) {
    background-color: #ffefc6;
}

.purchase-benefits div:nth-child(2) div:first-child {
    background-color: #dce8f7;
}

.purchase-benefits div:nth-child(3) div:first-child {
    background-color: #fae4d3;
}

.purchase-benefits div:nth-child(4) div:first-child {
    background-color: #f2e4ec;
}

.purchase-benefits div:nth-child(5) div:first-child {
    background-color: #ffefc6;
}

.card-purchase-header {
    width: 100%;
}

.card-purchase-header h3 {
    color: var(--accent-primary);
    font-size: 1.25em;
    text-align: center;
    margin: 30px 0 0 0;
    font-weight: 600;
}

.card-purchase-header p:last-child {
    text-align: center;
    font-weight: bold;
    opacity: 0.5;
}

.card-purchase-benefits {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 24%;
}

.parent-btn-signup {
    width: 30%;
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.parent-btn-signup a {
    width: 100%;
}

.parent-btn-signup a button {
    width: 100%;
    padding: 1rem;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    border: none;
    cursor: pointer;
    font-size: 1.25em;
    font-family: inherit;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-subtle);
}

.parent-btn-signup a button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}
.password-protection {grid-area: password-protection;padding: 50px 0 0 0 !important;}
.none-disclosur-info {grid-area: none-disclosur-info;}
.report-suspicious {grid-area: report-suspicious;}
.email-verification {grid-area: email-verification;}
.use-sec-pass {grid-area: use-sec-pass;}
.code-activation {grid-area: code-activation;}
.recom-wrapper {margin-top: 6rem;}
.recom-header {
    text-align: center;
    margin-bottom: 5rem;
}

.recom-header p {
    opacity: 0.7;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 1em;
    line-height: 1.8;
}

.recom-header h2 {
    color: var(--accent-primary);
    font-size: 1.75em;
    font-weight: 700;
    margin-bottom: 1rem;
}
.recom {
    display: grid;
    grid-template-areas: 'password-protection password-protection none-disclosur-info none-disclosur-info none-disclosur-info report-suspicious' 'password-protection password-protection use-sec-pass use-sec-pass email-verification email-verification' 'code-activation code-activation use-sec-pass use-sec-pass email-verification email-verification';
    gap: 40px;
    font-weight: 600;
}

.recom h3 {
    color: var(--accent-primary);
    font-size: 1.25em;
    font-weight: 700;
}

.recom p {
    font-size: 1em;
    color: var(--text-body);
    line-height: 1.8;
}

.password-protection-img {
    width: 50%;
    height: 180px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 3rem;
    display: flex;
    margin-top: 3rem;
    justify-content: center;
    align-items: center;
    background-color: var(--nav-bg);
    border: 1px solid var(--border-color);
}

.none-disclosur-info-img {
    width: 74px;
    height: 74px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--nav-bg);
    border: 1px solid var(--border-color);
    margin: 0 0 8px 1rem;
}

.d-flex-none-disclosur {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 16px;
}

.report-suspicious-header {
    padding: 0 1.5rem;
}

.recom > div:nth-child(1n + 3) {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.recom > div {
    box-shadow: var(--shadow-card);
    text-align: center;
    padding: 50px 0;
    border-radius: 10px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.recom > div:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.d-hidden {
    display: none !important;
}

.d-justify {
    justify-content: center;
}
.hottest-news-wrapper {
    margin: 6rem 0;
    padding: 4rem 0;
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    background-size: 1477px 280px;
    border-radius: 10px;
    background-repeat: no-repeat;
    background-position: center;
    color: #fff;
    box-shadow: var(--shadow-card);
}

.hottest-news-wrapper img {
    background-repeat: no-repeat;
    width: 100%;
}

[data-theme="dark"] .hottest-news-wrapper {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
}

.hottest-news {
    position: relative;
    width: 90%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    text-align: center;
}

.hottest-news-header h3 {
    font-size: 1.75em;
    font-weight: 700;
    margin: 0;
    word-spacing: 0.1em;
    color: #fff;
}

.hottest-news p:last-child {
    font-size: 1.25em;
    margin: 1rem 0 0 0;
    color: rgba(255, 255, 255, 0.9);
}

.hottest-news-header {
    width: 100%;
}

.hottest-news-img {
    width: 15%;
    position: absolute;
    left: 0;
}

.hottest-news-img img {
    width: 100%;
}
.card-breachof-sec {
    position: relative;
    border-radius: 10px;
    background-color: #dea70c;
    padding: 1rem 1rem 5rem 1rem;
    margin-bottom: 6rem;
    box-shadow: var(--shadow-card);
}

.breachof-sec-header {
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 30px;
}

.card-breachof-sec p {
    color: #fff;
    font-size: 1em;
    text-align: center;
    -webkit-font-feature-settings: 'ss02';
    font-feature-settings: 'ss02';
    line-height: 1.8;
}

.breachof-sec-header h3 {
    color: #fff;
    margin: 0;
    font-size: 1.75em;
    font-weight: 700;
}
.breachof-sec-flex {width: 80%;display: flex;margin: 0 auto;}
.breachof-sec-flex img {margin: 5rem -5rem 0 0;}
.breachof-sec-support {width: 80%;margin: 0 auto;}
.breachof-sec-support::after {
    content: '';
    position: absolute;
    left: 5%;
    bottom: 0;
    width: 60px;
    height: 60px;
    background-image: url('../images/security/invalid-name.png');
    background-size: contain;
    background-repeat: no-repeat;
}
.sec-recom {
    width: 45%;
    height: auto;
    min-height: 320px;
    position: absolute;
    top: 50px;
    right: 14px;
    padding: 16px;
    border-radius: 10px;
    background-color: var(--card-bg);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-color);
}
.card-blue-wrapper {display: flex;justify-content: start;gap: 5px;}
.card-sec-recom img {position: absolute;left: -50px;z-index: -1;}
.card-blue-wrapper div div {width: 5%;height: 5%;margin-bottom: 4.5px;padding: 5.5px;border-radius: 3px;}
.card-blue-wrapper > div:first-child div:nth-child(1n + 2) {
    background-color: var(--accent-primary);
}

.card-blue-wrapper > div:first-child div:nth-child(1) {
    opacity: 0.4;
    background-color: var(--accent-primary);
}

.card-blue-wrapper > div:last-child div {
    background-color: var(--accent-primary);
}
.sec-recom-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-top: 16px;
    margin-top: auto;
}
.sec-recom-desc {
    margin-top: 1rem;
}

.sec-recom-desc p {
    padding: 16px 8px;
    text-align: center;
    color: var(--text-body);
    font-weight: 600;
    margin: 0;
}

.sec-recom-btn a {
    width: 100%;
    display: flex;
    justify-content: center;
    text-decoration: none;
}

.sec-recom-btn a:hover {
    text-decoration: none;
}

.sec-recom-btn a button {
    cursor: pointer;
    padding: 10px;
    font-size: 1em;
    font-family: inherit;
    border: none;
    color: #fff;
    border-radius: 10px;
    background-color: #202630;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 400;
    box-shadow: var(--shadow-subtle);
    width: auto;
    min-width: 200px;
}

.sec-recom-btn a button:hover {
    background-color: #2a3441;
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
    text-decoration: none;
}
.vector-bottom svg{z-index: -3;position: absolute;left: 0;top: 94%;}

@media screen and (max-width: 1700px) {
    .sec-recom {
        width: 50%;
        right: -20px;
    }
}

@media screen and (max-width: 1300px) {
.hottest-news-img {display: none;}
.d-flex-none-disclosur{padding: 0 1rem;}
.hottest-news-wrapper {padding: 3rem 0;}
.purchase-benefits {margin-top: 40px;}
.btn-wrapper a {
    width: 50%;
}

.btn-wrapper button {
    width: 100%;
}
.card-sec-meas {margin-top: 15rem;}
.card-purchase-benefits {width: 40%;margin-bottom: 40px;}
.parent-btn-signup {width: 45%;margin-top: 0;}
.recom {grid-template-areas: 'password-protection none-disclosur-info' 'password-protection report-suspicious' ' use-sec-pass report-suspicious' 'use-sec-pass report-suspicious ' 'use-sec-pass code-activation ' 'email-verification code-activation ' 'email-verification code-activation ';grid-template-columns: 1.3fr 1fr;}
.flex-col {flex-direction: row;}
.breachof-sec-flex p {margin-top: 5rem;}
.breachof-sec-flex img {margin: -0.5rem 0 0 0;}
.breachof-sec-support {width: 80%;margin: 3rem auto auto auto;}
.card-sec-recom img {
    left: -255px;
}

.sec-recom {
    width: 55%;
    right: 80px;
}

.sec-recom-desc p {
    margin-top: 2rem;
    line-height: inherit;
}
.card-sec-meas-header{padding:0 ;}
.btn-wrapper{padding:0;}
.vector-bottom svg {display:none;}
.active-flex-wallet {font-size: 14px;}
}

@media screen and (max-width: 1000px) {
.d-flex-wallet span {font-size: 45px;}
.active-flex-wallet{margin-top:1rem !important;}
.active-details-sec-meas h2 {
    font-size: 1.25em !important;
}

.active-flex-wallet p {
    font-size: 1em;
    color: var(--text-body);
}

.sec-recom {
    right: 45px;
}

.card-sec-recom img {
    left: -240px;
}

.hottest-news p:first-child {
    font-size: 0.875em;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.9);
}
.card-vector-top {top: -40px;}
.sec-recom-desc p {padding: 15px 0 20px 0;}
}

@media screen and (max-width: 800px) {
.card-breachof-sec {margin-bottom: 4rem;}
.recom-wrapper{margin-top:4rem;}
.purchase-benefits-wrapper {margin-top: 4rem;}
.breachof-sec-flex p {margin-top: 2rem;}
.card-details-sec-meas-wallet.active-card-details {font-size: 0.7rem;}
.card-skeleton {height: 166px;}
.card-detail{overflow-y:hidden;overflow-x:auto;}
.details-sec-meas{width:1500px !important;}
.password-protection {padding: 50px 0 !important;}
.card-vector-d {display: none;}
.card-vector-m {left:0;top:8%;display:block;}
.card-details-sec-meas-wallet {
    pointer-events: none;
    width: 20% !important;
    height: 150px;
    flex-direction: column;
    padding: 0.5rem 1rem;
    font-size: 0.7rem;
    color: var(--text-body);
}

.card-details-sec-meas-wallet > div:last-child {
    writing-mode: inherit;
    font-weight: bold;
    transform: rotate(0);
    padding: 0;
}

.card-details-sec-meas-wallet > div:last-child p {
    display: block;
    margin-top: 1rem;
    color: var(--text-body);
}

.d-flex-wallet {
    align-items: center;
    flex-direction: row;
    writing-mode: inherit;
    transform: rotate(0);
    justify-content: start;
}

.d-flex-wallet h2 {
    margin: 0 0.5rem 0 0;
    color: var(--text-primary);
}
.d-flex-wallet span {font-size: 30px;}
.card-details-sec-meas-wrapper {margin: 4rem auto auto auto !important;}
.card-sec-recom {width: 100%;display: none;}
.hottest-news-wrapper {margin: 4rem 0;padding: 2rem 0;}
.heading-wrapper {flex-direction: column;}
.card-sec-meas {width: 100%;padding: 0;margin-top: 5rem;}
.btn-wrapper {
    flex-direction: column;
    padding: 0;
    margin-top: 2rem;
}
.btn-wrapper .download-pdf-btn {width: 100%;}
.btn-wrapper a {width: 100%;}
.btn-wrapper button {margin-top: 40px;}
.card-purchase-benefits {width: 100%;margin-bottom: 4rem;}
.card-purchase-header {width: 80%;}
.card-purchase-header p:last-child {margin: 0 }
.parent-btn-signup {width: 60%;}
.recom {grid-template-areas: 'report-suspicious' 'none-disclosur-info' 'password-protection' 'email-verification' 'use-sec-pass' 'code-activation';grid-template-columns: none;}
.d-flex-none-disclosur {align-items: center;flex-direction: column;}
.flex-col {flex-direction: column;}
.password-protection-img {display: none;}
.d-hidden {display: flex !important;}
.breachof-sec-flex img {display: none;}
.breachof-sec-flex {width: 95%;}
.breachof-sec-support {width: 95%;}
.card-sec-meas-header {margin-top: 2rem;}
.card-sec-meas img {right:45%;}
}

@media screen and (max-width: 600px) {
    .hottest-news p:last-child {
        font-size: 1em;
    }
    
    .hottest-news-header h3 {
        font-size: 1.125em;
    }
}

@media screen and (max-width: 500px) {
    .parent-btn-signup {
        width: 85%;
    }
    
    .card-vector-top {
        right: -90px;
    }
    
    .breachof-sec-header picture {
        display: none;
    }
    
    .hottest-news-wrapper {
        background-size: 1000px 170px;
    }
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */

[data-theme="dark"] .card-sec-meas-header h1 {
    color: var(--accent-primary);
}

[data-theme="dark"] .card-sec-meas-header p {
    color: var(--text-body);
}

[data-theme="dark"] .card-details-sec-meas-wrapper h2 {
    color: var(--accent-primary);
}

[data-theme="dark"] .card-details-sec-meas-wallet {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .active-card-details {
    box-shadow: var(--shadow-card);
}

[data-theme="dark"] .active-details-sec-meas h2 {
    color: var(--text-primary);
}

[data-theme="dark"] .active-flex-wallet p {
    color: #213364;
}

[data-theme="dark"] .d-flex-wallet h2 {
    color: var(--text-primary);
}

[data-theme="dark"] .d-flex-wallet span {
    color: var(--text-secondary);
}

[data-theme="dark"] .purchase-benefits-wrapper h2 {
    color: var(--accent-primary);
}

[data-theme="dark"] .card-purchase-header h3 {
    color: var(--accent-primary);
}

[data-theme="dark"] .recom-header h2 {
    color: var(--accent-primary);
}

[data-theme="dark"] .recom-header p {
    color: var(--text-secondary);
}

[data-theme="dark"] .recom h3 {
    color: var(--accent-primary);
}

[data-theme="dark"] .recom p {
    color: var(--text-body);
}

[data-theme="dark"] .recom > div {
    background: var(--card-bg);
    border-color: var(--border-color);
    box-shadow: var(--shadow-card);
}

[data-theme="dark"] .recom > div:hover {
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

[data-theme="dark"] .password-protection-img {
    background-color: var(--nav-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .none-disclosur-info-img {
    background-color: var(--nav-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .sec-recom {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    box-shadow: var(--shadow-card);
}

[data-theme="dark"] .sec-recom-desc p {
    color: var(--text-body);
}

[data-theme="dark"] .card-skeleton {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

/* Auto dark theme support based on system preference */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .card-sec-meas-header h1 {
        color: var(--accent-primary);
    }

    :root:not([data-theme="light"]) .card-sec-meas-header p {
        color: var(--text-body);
    }

    :root:not([data-theme="light"]) .card-details-sec-meas-wrapper h2 {
        color: var(--accent-primary);
    }

    :root:not([data-theme="light"]) .card-details-sec-meas-wallet {
        background-color: var(--card-bg);
        border-color: var(--border-color);
    }

    :root:not([data-theme="light"]) .recom > div {
        background: var(--card-bg);
        border-color: var(--border-color);
    }

    :root:not([data-theme="light"]) .recom > div:hover {
        box-shadow: 0 4px 15px rgba(255, 255, 255, 0.15);
        transform: translateY(-2px);
    }

    :root:not([data-theme="light"]) .sec-recom {
        background-color: var(--card-bg);
        border-color: var(--border-color);
    }

    :root:not([data-theme="light"]) .active-flex-wallet p {
        color: #213364;
    }
}