/* Navigation overview - Camera an ninh */
.menkar-camera-overview-nav {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    overflow: hidden;
    margin-top: -52px;
    border: 1px solid #e8eaf0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(34, 58, 117, 0.12);
}

.menkar-camera-overview-nav > br {
    display: none !important;
}

.menkar-camera-overview-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 92px;
    padding: 12px 8px 10px;
    color: #223a75;
    text-align: center;
    text-decoration: none !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.menkar-camera-overview-item:hover {
    color: #f8b020;
    background: rgba(248, 176, 32, 0.05);
}

.menkar-camera-overview-item.is-active {
    color: #f8b020;
    background: linear-gradient(180deg, rgba(248, 176, 32, 0.05), rgba(248, 176, 32, 0.015));
}

.menkar-camera-overview-item.is-active::after {
    content: "";
    position: absolute;
    right: 12px;
    bottom: 0;
    left: 12px;
    height: 2px;
    background: #f8b020;
}

.menkar-camera-overview-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-bottom: 7px;
    color: currentColor;
}

.menkar-camera-overview-icon svg {
    display: block;
    width: 28px;
    height: 28px;
}

.menkar-camera-overview-text {
    color: currentColor;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    text-transform: uppercase;
    white-space: nowrap;
}

@media (max-width: 849px) {
    .menkar-camera-overview-nav {
        grid-template-columns: repeat(7, 145px);
        overflow-x: auto;
        margin-top: 0;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
    }

    .menkar-camera-overview-item {
        scroll-snap-align: start;
    }
}

/* Camera installation benefits */
.menkar-camera-benefits {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    margin-top: 25px;
}

.menkar-camera-benefit-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 180px;
    padding: 24px 14px 19px;
    border: 1px solid #e5e8ee;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(34, 58, 117, 0.06);
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.menkar-camera-benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 9px 24px rgba(34, 58, 117, 0.13);
}

.menkar-camera-benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    color: #223a75;
}

.menkar-camera-benefit-icon svg {
    display: block;
    width: 42px;
    height: 42px;
}

.menkar-camera-benefit-title {
    width: 100%;
    min-height: 38px;
    margin: 0 0 8px;
    color: #223a75;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
    text-align: center !important;
    text-transform: uppercase;
}

.menkar-camera-benefit-description {
    width: 100%;
    margin: 0;
    color: #000;
    font-size: 12.5px;
    line-height: 1.5;
    text-align: center !important;
}

@media (max-width: 849px) {
    .menkar-camera-benefits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    .menkar-camera-benefits {
        grid-template-columns: 1fr;
    }
}

/* Camera solutions for each need */
.menkar-camera-solution-card .box-image img {
    width: 100%;
    height: 170px;
    object-fit: cover;
}

.menkar-camera-solution-card .box-text {
    position: relative;
    padding-top: 34px !important;
}

.menkar-camera-solution-icon {
    position: absolute;
    z-index: 3;
    top: -28px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    color: #fff;
    border: 4px solid #fff;
    border-radius: 50%;
    background: #223a75;
    box-shadow: 0 3px 9px rgba(34, 58, 117, 0.22);
}

.menkar-camera-solution-icon svg {
    display: block;
    width: 25px;
    height: 25px;
}

@media (max-width: 549px) {
    .menkar-camera-solution-card .box-image img {
        height: 220px;
    }
}

/* Camera service overview content */
.menkar-camera-summary {
    color: #111;
    font-size: 14.5px;
    line-height: 1.75;
}

.menkar-camera-summary__intro {
    margin: 0 0 20px;
    color: #111;
    text-align: left;
}

.menkar-camera-summary__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.menkar-camera-summary__list li {
    position: relative;
    margin: 0 0 17px;
    padding-left: 27px;
    color: #111;
    line-height: 1.55;
    text-align: left;
}

.menkar-camera-summary__list li::before {
    content: "\2713";
    position: absolute;
    top: 0;
    left: 0;
    color: #f8b020;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.3;
}

/* Professional camera installation process */
.menkar-camera-process {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    width: 100%;
    padding: 22px 14px 28px;
    color: #fff;
}

.menkar-camera-process > br {
    display: none !important;
}

.menkar-camera-process-step {
    position: relative;
    min-width: 0;
    padding: 0 14px;
    text-align: center;
}

.menkar-camera-process-step:not(:last-of-type)::after {
    content: "\2192";
    position: absolute;
    z-index: 4;
    top: 12px;
    right: -9px;
    color: #f8b020;
    font-size: 25px;
    font-weight: 700;
    line-height: 1;
}

.menkar-camera-process-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    color: #223a75;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.menkar-camera-process-icon svg {
    display: block;
    width: 29px;
    height: 29px;
}

.menkar-camera-process-number {
    margin: 9px 0 7px;
    color: #f8b020;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
}

.menkar-camera-process-content {
    min-height: 100px;
    padding: 0 8px;
}

.menkar-camera-process-step + .menkar-camera-process-step .menkar-camera-process-content {
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.menkar-camera-process-title {
    width: 100%;
    min-height: 38px;
    margin: 0 0 7px;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
    text-align: center !important;
    text-transform: uppercase;
}

.menkar-camera-process-description {
    width: 100%;
    margin: 0;
    color: #fff;
    font-size: 12.5px;
    line-height: 1.5;
    text-align: center !important;
}

@media (max-width: 849px) {
    .menkar-camera-process {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 34px 0;
    }

    .menkar-camera-process-step::after {
        display: none;
    }

    .menkar-camera-process-step:nth-of-type(odd) .menkar-camera-process-content {
        border-left: 0;
    }
}

@media (max-width: 420px) {
    .menkar-camera-process {
        grid-template-columns: 1fr;
    }

    .menkar-camera-process-content {
        border-left: 0 !important;
    }
}

/* Hero camera feature icons */
.menkar-camera-hero-features {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-top: 28px;
    max-width: 620px;
}

.menkar-camera-hero-features > br {
    display: none !important;
}

.menkar-camera-hero-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    color: #fff;
    text-align: center;
}

.menkar-camera-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 8px;
    color: #fff;
    font-size: 0;
}

.menkar-camera-hero-icon::before {
    content: "";
    display: block;
    width: 34px;
    height: 34px;
    background: currentColor;
    -webkit-mask: var(--menkar-camera-hero-icon) center / contain no-repeat;
    mask: var(--menkar-camera-hero-icon) center / contain no-repeat;
}

.menkar-camera-hero-icon--quality {
    --menkar-camera-hero-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 4l13 6v20l-13 6-13-6V10l13-6z'/%3E%3Ccircle cx='20' cy='20' r='7'/%3E%3Cpath d='M20 14v3M20 23v3M14 20h3M23 20h3'/%3E%3C/svg%3E");
}

.menkar-camera-hero-icon--247 {
    --menkar-camera-hero-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='20' cy='21' r='14'/%3E%3Cpath d='M20 7V3M14 3h12M20 13v9l6 4M9 9l-3-3M31 9l3-3'/%3E%3C/svg%3E");
}

.menkar-camera-hero-icon--remote {
    --menkar-camera-hero-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 5h20v30H10z'/%3E%3Cpath d='M15 12h10M15 28h10'/%3E%3Ccircle cx='20' cy='20' r='5'/%3E%3Cpath d='M18 20l2 2 4-5'/%3E%3C/svg%3E");
}

.menkar-camera-hero-icon--storage {
    --menkar-camera-hero-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='22' height='22' rx='3'/%3E%3Cpath d='M15 9V5h10v4M15 31v4h10v-4M15 18h10M15 24h10'/%3E%3Ccircle cx='20' cy='14' r='2'/%3E%3C/svg%3E");
}

.menkar-camera-hero-label {
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.35;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

@media (max-width: 849px) {
    .menkar-camera-hero-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
        max-width: 100%;
    }
}

/* Stable text/CSS icons so WordPress cannot strip empty SVG icons */
.menkar-camera-overview-icon,
.menkar-camera-solution-icon,
.menkar-camera-benefit-icon,
.menkar-camera-process-icon,
.menkar-camera-hero-icon {
    font-size: 0 !important;
}

.menkar-camera-overview-icon::before,
.menkar-camera-solution-icon::before,
.menkar-camera-benefit-icon::before,
.menkar-camera-process-icon::before {
    content: attr(data-icon);
    display: inline-block;
    color: currentColor;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 800;
    line-height: 1;
}

.menkar-camera-overview-icon::before {
    font-size: 27px !important;
}

.menkar-camera-solution-icon::before {
    font-size: 23px !important;
}

.menkar-camera-benefit-icon::before {
    font-size: 34px !important;
}

.menkar-camera-process-icon::before {
    font-size: 26px !important;
}

.menkar-camera-hero-icon::before {
    display: inline-block;
    color: currentColor;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px !important;
    font-weight: 800;
    line-height: 1;
    background: transparent !important;
    -webkit-mask: none !important;
    mask: none !important;
    width: auto !important;
    height: auto !important;
}

.menkar-camera-hero-icon--quality::before { content: "◎"; }
.menkar-camera-hero-icon--247::before { content: "◴"; }
.menkar-camera-hero-icon--remote::before { content: "▣"; }
.menkar-camera-hero-icon--storage::before { content: "▤"; }

/* Mobile optimization for camera service page */
@media (max-width: 549px) {
    .menkar-camera-overview-nav {
        grid-template-columns: repeat(7, 118px) !important;
        margin: -20px 0 18px !important;
        border-radius: 10px;
    }

    .menkar-camera-overview-item {
        min-height: 72px;
        padding: 9px 6px 8px;
    }

    .menkar-camera-overview-icon {
        width: 24px;
        height: 24px;
        margin-bottom: 5px;
    }

    .menkar-camera-overview-icon::before {
        font-size: 21px !important;
    }

    .menkar-camera-overview-text {
        font-size: 10.5px;
        line-height: 1.25;
        white-space: normal;
    }

    .menkar-camera-solution-card .box-image img {
        height: 135px !important;
    }

    .menkar-camera-solution-card .box-text {
        padding: 26px 10px 12px !important;
    }

    .menkar-camera-solution-icon {
        top: -23px;
        left: 10px;
        width: 42px;
        height: 42px;
        border-width: 3px;
    }

    .menkar-camera-solution-icon::before {
        font-size: 19px !important;
    }

    .menkar-camera-solution-card .box-text h4,
    .menkar-camera-solution-card .box-text .box-text-inner h4,
    .menkar-camera-solution-card .box-text .box-text-inner h3 {
        font-size: 12.5px !important;
        line-height: 1.25 !important;
        margin-bottom: 6px !important;
    }

    .menkar-camera-solution-card .box-text p {
        font-size: 11.5px !important;
        line-height: 1.45 !important;
        margin-bottom: 8px !important;
    }

    .menkar-camera-benefits {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px;
        margin-top: 16px;
    }

    .menkar-camera-benefit-card {
        min-height: 138px;
        padding: 16px 9px 13px;
    }

    .menkar-camera-benefit-icon {
        width: 34px;
        height: 34px;
        margin-bottom: 8px;
    }

    .menkar-camera-benefit-icon::before {
        font-size: 27px !important;
    }

    .menkar-camera-benefit-title {
        min-height: auto;
        font-size: 11.5px;
        line-height: 1.3;
        margin-bottom: 5px;
    }

    .menkar-camera-benefit-description {
        font-size: 10.8px;
        line-height: 1.42;
    }

    .menkar-camera-summary {
        font-size: 13px;
        line-height: 1.65;
    }

    .menkar-camera-summary__intro {
        margin-bottom: 14px;
    }

    .menkar-camera-summary__list li {
        margin-bottom: 12px;
        padding-left: 23px;
    }

    .menkar-camera-process {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px 8px;
        padding: 24px 10px 20px;
        border-radius: 10px;
    }

    .menkar-camera-process-step::after {
        display: none !important;
    }

    .menkar-camera-process-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 8px;
    }

    .menkar-camera-process-icon::before {
        font-size: 20px !important;
    }

    .menkar-camera-process-number {
        font-size: 13px;
        margin-bottom: 4px;
    }

    .menkar-camera-process-content {
        min-height: auto;
        padding: 0 6px !important;
        border-left: 0 !important;
    }

    .menkar-camera-process-title {
        min-height: 32px;
        font-size: 11.5px;
        line-height: 1.25;
        margin-bottom: 6px;
    }

    .menkar-camera-process-description {
        font-size: 10.8px;
        line-height: 1.4;
    }
}
/* Mobile project section: show more projects instead of one-by-one slider */
@media (max-width: 549px) {
    .menkar-camera-projects .slider,
    .menkar-camera-projects .flickity-slider,
    .menkar-camera-projects .row-slider {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px 10px !important;
        height: auto !important;
        transform: none !important;
    }

    .menkar-camera-projects .flickity-viewport {
        height: auto !important;
        overflow: visible !important;
    }

    .menkar-camera-projects .post-item,
    .menkar-camera-projects .col {
        position: static !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        padding: 0 !important;
    }

    .menkar-camera-projects .flickity-button,
    .menkar-camera-projects .flickity-page-dots,
    .menkar-camera-projects .slider-nav-light,
    .menkar-camera-projects .previous,
    .menkar-camera-projects .next {
        display: none !important;
    }

    .menkar-camera-projects .box-image,
    .menkar-camera-projects .box-image img {
        height: 115px !important;
        object-fit: cover !important;
    }

    .menkar-camera-projects .box-text,
    .menkar-camera-projects .box-text-inner {
        padding: 8px 2px 0 !important;
        text-align: center !important;
    }

    .menkar-camera-projects .post-title,
    .menkar-camera-projects .post-title a,
    .menkar-camera-projects .box-text h5,
    .menkar-camera-projects .box-text h5 a {
        color: #223a75 !important;
        font-size: 11.8px !important;
        line-height: 1.35 !important;
        margin: 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}