@font-face {
    font-family: 'CourierCustom';
    src: url('/css/CourierPrime-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* Italic */
@font-face {
    font-family: 'CourierCustom';
    src: url('/css/CourierPrime-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

/* Bold */
@font-face {
    font-family: 'CourierCustom';
    src: url('/css/CourierPrime-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/* Bold Italic */
@font-face {
    font-family: 'CourierCustom';
    src: url('/css/CourierPrime-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Gordita-custom';
    src: url('/css/Gordita-Medium.otf') format('opentype');
}


html {

}

body {
    background: #bbbbbb;
    font-family: 'CourierCustom', monospace;
    max-width: 600px;
   
    justify-self: center;
}

/* header */
.topbar {
    padding: 7px 10px;
}

.buy-btn {
    border: 1px solid #000;
    padding: 5px 12px;
    font-size: 12px;
    background: white;
}

.instaTraceText {
    font-size: 14px;
    color: #ffffff;
    line-height: 14px;
}

.sectionText {
    font-size: 14px;
    font-weight: 700;
    line-height: 15px;
}

@media (max-width: 767px) {
    .custom-margin {
        margin-bottom: -11px;
    }
}


@media (min-width: 768px) {
    .custom-margin {
        margin-bottom: -36px;
    }
}

@media (max-width: 767px) {
    .custom-saftey-top-margin {
        margin-top: 91px !important;
    }
}


@media (min-width: 768px) {
    .custom-saftey-top-margin {
        margin-top: 116px !important;
    }
}

@media (max-width: 767px) {
    .custom-top-margin {
        margin-top: 117px !important;
    }
}


@media (min-width: 768px) {
    .custom-top-margin {
        margin-top: 147px !important;
    }
}


/* section box */
.section-box {
    border-radius: 12px;
    padding: 18px;
}

.instaTracebox {
    overflow: visible !important;
}

/* apple card */
.fruit-card {
    /*    position: absolute;
    margin-left: 25px;
    margin-right: 25px;
    top: 213px;
    border-radius: 15px;
    overflow: hidden;
    z-index: 3;*/
    position: relative;
    margin-left: 15px;
    margin-right: 15px;
    border-radius: 15px;
    overflow: hidden;
    bottom: -71px;
    z-index: 3;
    margin-top: -62px;
    min-height: 210px;
}


@media (max-width: 767px) {
    .fruit-card {
        min-height: 210px !important;
    }
}


@media (min-width: 768px) {
    .min-height {
        margin-top: 300px !important;
    }
}




.fruit-overlay1 {
    position: absolute;
    top: 13px;
    width: 100%;
    right: -42px;
    padding: 20px;
    color: white;
}

.fruit-overlay2 {
    position: absolute;
    bottom: 20px;
    width: 100%;
    padding: 20px;
    color: white;
}

/* safety */
.safety {
    background: #ffffff;
    border-radius: 0;
}

.progress-line {
    height: 6px;
    background: #ddd;
    margin-top: 6px;
}

.progress-fill {
    height: 6px;
    background: #3b6fb6;
}

/* subject */
.subject {
    background: #d6c4b0;
}

/* source */
.source {
    background: #000;
    color: white;
}

    .source img {
        width: 100%;
        border-radius: 12px;
    }

/* grower */
.grower {
    background: #e6e0cf;
}

.pay-btn {
    background: #000;
    color: white;
    padding: 5px 20px;
    font-size: 12px;
}

/* timeline */
.timeline {
    background: #ffffff;
}

.timelineSteps {
    position: relative;
    padding-left: 43px;
    padding-top: 27px;
}

/* REMOVE the old .timeline::before */

.timeline-item {
    position: relative;
    margin-bottom: 40px;
}

    /* vertical line between dots */
    .timeline-item::before {
        content: '';
        position: absolute;
        left: -28px;
        top: 32px;
        bottom: -37px;
        /* space before next dot */
        width: 2px;
        background: #cfcfcf;
    }

    /* remove line after last item */
    .timeline-item:last-child::before {
        display: none;
    }

.timeline-dot {
    position: absolute;
    left: -38px;
    top: 5px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 5px solid #e6e6e6;
}

.dot-red {
    background: #e63946;
}

.dot-blue {
    background: #3a66b7;
}

.dot-orange {
    background: #f47c2c;
}

.dot-green {
    background: #2d8f4e;
}

.info-box {
    background: #dfe3e6;
    padding: 10px;
    margin-top: 7px;
    font-size: 14px;
}

.badge-box {
    background: #cfd3e3;
    padding: 8px 8px;
    font-style: italic;
    display: inline-block;
    margin-right: 8px;
    font-size: 14px;
}

.lab-box {
    background: #dfe3e6;
    padding: 15px;
    display: inline-block;
    width: 45%;
    margin-right: 10px;
    font-size: 14px;
}

.green-text {
    color: #2d8f4e;
    font-weight: bold;
}

/* handling */
.handling {
    background: #d6c4b0;
}

/* carbon */
.carbon {
    background: #000;
    color: white;
}

.camera-overlay {
    position: absolute;
    inset: 0;
    color: white;
    font-weight: 500;
    font-size: 18px;
}

/* Text Positions */

.top-left {
    position: absolute;
    top: 17px;
    left: 21px;
}

.top-right {
    position: absolute;
    top: 17px;
    right: 21px;
}

.bottom-left {
    position: absolute;
    bottom: 13px;
    left: 25px;
}

.bottom-right {
    position: absolute;
    bottom: 13px;
    right: 21px;
}

/* Focus circle */

.focus-circle {
    position: absolute;
    top: 47%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 45px;
    height: 45px;
    border: 1.5px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

/* Corner Frames */

.corner {
    position: absolute;
    width: 21px;
    height: 21px;
    border: 1.5px solid white;
}

    .corner.tl {
        top: 11px;
        left: 11px;
        border-right: none;
        border-bottom: none;
    }

    .corner.tr {
        top: 11px;
        right: 11px;
        border-left: none;
        border-bottom: none;
    }

    .corner.bl {
        bottom: 11px;
        left: 11px;
        border-right: none;
        border-top: none;
    }

    .corner.br {
        bottom: 11px;
        right: 11px;
        border-left: none;
        border-top: none;
    }

.InstaTrace-wrapper {
    position: relative;
}

.colour-section {
    position: relative;
    z-index: 2;
}



.InstaTrace-wrapper::after {
    content: "";
    position: absolute;
    bottom: -40px;
    left: 0;
    width: 100%;
    height: 80px;
    background: white;
    z-index: 1;
}

.rating-bar {
    display: flex;
    gap: 6px;
    width: 170px;
}

.bar {
    flex: 1;
    height: 6px;
    background: #d9d9d9;
}

    .bar.active {
        background: #2b5fad;
    }


.subject-wrapper {
    position: relative;
    margin-bottom: -20px; /* overlap next section */
}

.subject-section {
    position: relative;
    z-index: 2;
    top: -20px;
}


.location-wrapper {
    position: relative;
    margin-bottom: -15px; /* overlap next section */
}

.location-section {
    position: relative;
    z-index: 2;
    top: -15px;
}



.Profile-wrapper {
    position: relative;
    margin-bottom: -15px; /* overlap next section */
}

.Profile-section {
    position: relative;
    z-index: 2;
    top: -15px;
}



.location-card {
    position: relative;
    /* IMPORTANT */
    border-radius: 15px;
    overflow: hidden;
    margin-top: 17px;
    z-index: 1;
}

.location-img {
    width: 100%;
    height: 277px;
    object-fit: cover;
}

.paramsTextStyle {
    font-size: 17px;
    color: #626465;
}


.paramsSubTextStyle {
    font-size: 15px;
    
}

.month-grid {
/*    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    justify-content: space-between;*/
}

.month {
   
    text-align: center;
}

    .month span {
        display: block;
        margin-bottom: 6px;
    }

.dot-bar {
    height: 10px;
    border-radius: 2px;
    background: #e5e5e5;
}

    .dot-bar.active {
        background: #e02020;
    }

.Tracking-wrapper {
    position: relative;
    margin-bottom: -15px; /* overlap next section */
}

.Tracking-section {
    position: relative;
    z-index: 2;
    top: -15px;
}


.carbonAudit-wrapper {
    position: relative;
    margin-bottom: -15px; /* overlap next section */
}

.carbonAudit-section {
    position: relative;
    z-index: 2;
    top: -15px;
}



.Handling-wrapper {
    position: relative;
    margin-bottom: -15px; /* overlap next section */
}

.Handling-section {
    position: relative;
    z-index: 2;
    top: -15px;
}





.fruit_info_card {
    
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

.info-panel {
    padding: 16px;
    color: white;
   
    position: relative;
}

.image-panel img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.fruit_desc {
    font-size: 14px;
    margin-top: 10px;
    line-height: 1.5;
}

.subject_text {
    position: absolute;
    top: 10px;
    left: 20px;
    font-size: 28px;
    font-weight: 900;
    color: #e11;
    transform: rotate(-20deg);
}

.tags {
    margin-top: 20px;
}

.tag_box {
    border: 1px solid #333;
    padding: 6px 10px;
    margin-right: 6px;
    background: #9aa59e;
    font-weight: bold;
    display: inline-block;
}

/* ============================= */
/* BASE (NO animation by default) */
/* ============================= */

.safteytyping,
.subjectfiletyping {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    width: 0;
}

/* container */
.sourcelocationTextVillage {
    display: inline-block;
}

    /* NEW: village & state lines */
    .sourcelocationTextVillage .village,
    .sourcelocationTextVillage .state {
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        width: 0;
    }




.safteytyping.start-animation {
    animation: typing15 1s steps(15) forwards;
    animation-delay: 1s;
}

.subjectfiletyping.start-animation {
    animation: typing12 1s steps(12) forwards;
    animation-delay: 0.5s;
}

.sourcelocationTextVillage.start-animation .village {
   animation: typingVillage 1.5s steps(20) forwards;
}


.sourcelocationTextVillage.start-animation .state {
   
    animation: typingState 1.5s steps(20) forwards;
    animation-delay: 1s;
}


@keyframes typing15 {
    from {
        width: 0;
    }

    to {
        width: 15ch;
    }
}

/* typing - 12 chars */
@keyframes typing12 {
    from {
        width: 0;
    }

    to {
        width: 12ch;
    }
}

/* NEW keyframes */
@keyframes typingVillage {
    from {
        width: 0;
    }

    to {
        width: 20ch;
    }
}

@keyframes typingState {
    from {
        width: 0;
    }

    to {
        width: 20ch;
    }
}


.custom-modal {
    border-radius: 20px;
    overflow: hidden;
}

.main-banner {
    border-radius: 12px;
    max-height: 140px;
    object-fit: cover;
}

.platform-img {
    height: 40px;
    object-fit: contain;
}

.offline-btn {
    max-height: 80px;
}

.logo-img {
    max-height: 40px;
    opacity: 0.8;
}

.param-box {
    position: relative;
    padding: 10px;
}

    /* Disabled overlay */
    .param-box.disabled::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(200, 200, 200, 0.6); /* grey layer */
        border-radius: 6px;
        z-index: 2;
    }

    /* Optional: reduce brightness of content */
    .param-box.disabled {
        pointer-events: none; /* disable clicks */
    }

        /* Optional: make text slightly faded */
        .param-box.disabled b,
        .param-box.disabled .paramsSubTextStyle,
        .param-box.disabled .bar {
            opacity: 0.6;
        }