/* =========================================================
   QUOTATION TOOL - YEARBOOK CSS
   Specific styles for Yearbook quotation tool
========================================================= */


/* =========================================================
   YEARBOOK POPUP
========================================================= */


.service-yearbook-popup-overlay {

    position: fixed;

    inset: 0;

    display: none;

    justify-content: center;

    align-items: center;


    background: rgba(0,0,0,.70);


    z-index:999999;


    padding:20px;


    box-sizing:border-box;

}



.service-yearbook-popup-overlay.is-open {

    display:flex;

}





.service-yearbook-popup-container {


    position:relative;


    width:min(1000px,95vw);


    height:96vh;


    max-height:96vh;



    display:flex;


    flex-direction:column;



    overflow:hidden;



    background:#f1efef;



    border-radius:14px;



    box-shadow:


        0 20px 60px rgba(0,0,0,.30);



    box-sizing:border-box;


}





/* =========================================================
   YEARBOOK HEADER
========================================================= */


.service-yearbook-popup-header {


    display:flex;


    justify-content:space-between;


    align-items:flex-start;


    gap:20px;



    padding:20px 24px;



    border-bottom:


        1px solid #e5e5e5;


}



.service-yearbook-popup-header-text {


    flex:1;


}



.service-yearbook-popup-title {


    margin:0;


    font-size:1.8rem;


    color:#04034e;


}



.service-yearbook-popup-description {


    margin:8px 0 0 0;


    font-size:1rem;


    color:#6c757d;


    line-height:1.5;


}



.service-yearbook-popup-close {


    display:flex;


    justify-content:center;


    align-items:center;


    flex-shrink:0;



    width:42px;


    height:42px;



    border:none;


    border-radius:50%;



    background:transparent !important;



    color:#ff0019 !important;



    font-size:26px;



    cursor:pointer;



    transition:.25s ease;


}



.service-yearbook-popup-close:hover {


    transform:rotate(90deg);


}



.service-yearbook-popup-close i {


    pointer-events:none;


}





/* =========================================================
   YEARBOOK BODY
========================================================= */


.service-yearbook-popup-body {


    flex:1 1 auto;


    min-height:0;


    overflow-y:auto;


    overflow-x:hidden;



    padding:24px;


    box-sizing:border-box;


}





/* =========================================================
   YEARBOOK SERVICE AREA
========================================================= */


.service-yearbook-service {


    width:100%;


}



.service-yearbook-institution-fields {


    display:grid;


    grid-template-columns:


        repeat(3,minmax(0,1fr));



    gap:20px;


    width:100%;


}

/* =========================================================
   YEARBOOK SELECTOR / DROPDOWN
========================================================= */


.service-yearbook-selector {

    position:relative;

    width:100%;

}




/* =========================================================
   SELECTED ITEM
========================================================= */


.service-yearbook-selector-selected {


    display:flex;


    align-items:center;


    gap:20px;



    width:100%;



    padding:15px;



    background:#ffffff;



    border:1px solid #d8d8d8;



    border-radius:10px;



    cursor:pointer;



    box-sizing:border-box;



    transition:.25s ease;


}



.service-yearbook-selector-selected:hover {


    border-color:#135f84;


}




/* =========================================================
   SELECTED IMAGE
========================================================= */


.service-yearbook-selector-image {


    flex-shrink:0;


    width:100px;


    height:100px;



    overflow:hidden;



    border-radius:10px;



    background:#f5f5f5;


}



.service-yearbook-selector-image img {


    width:100%;


    height:100%;


    object-fit:cover;


}





/* =========================================================
   SELECTED TEXT
========================================================= */


.service-yearbook-selector-text {


    flex:1;


}



.service-yearbook-selector-title {


    font-size:1.1rem;


    font-weight:600;


    color:#04034e;


}



.service-yearbook-selector-description {


    margin-top:6px;


    font-size:.95rem;


    color:#6c757d;


    line-height:1.4;


}





/* =========================================================
   ARROW
========================================================= */


.service-yearbook-selector-arrow {


    flex-shrink:0;


    font-size:22px;


    color:#135f84;


    transition:.25s ease;


}



.service-yearbook-selector.open 
.service-yearbook-selector-arrow {


    transform:rotate(180deg);


}





/* =========================================================
   OPTIONS CONTAINER
========================================================= */


.service-yearbook-selector-options {


    display:none;


    position:absolute;


    top:calc(100% + 8px);



    left:0;


    right:0;



    z-index:100;



    max-height:400px;



    overflow-y:auto;



    background:#ffffff;



    border:1px solid #ddd;



    border-radius:10px;



    box-shadow:


        0 15px 40px rgba(0,0,0,.20);



    padding:10px;


}





/* =========================================================
   OPEN STATE
========================================================= */


.service-yearbook-selector.open 
.service-yearbook-selector-options {


    display:block;


}





/* =========================================================
   OPTION ITEM
========================================================= */


.service-yearbook-selector-option {


    display:flex;


    align-items:center;


    gap:15px;



    padding:12px;



    cursor:pointer;



    border-radius:8px;



    transition:.20s ease;


}



.service-yearbook-selector-option:hover {


    background:#f1f5f7;


}




/* =========================================================
   OPTION IMAGE
========================================================= */


.service-yearbook-selector-option-image {


    width:80px;


    height:80px;



    flex-shrink:0;



    overflow:hidden;



    border-radius:8px;


}



.service-yearbook-selector-option-image img {


    width:100%;


    height:100%;


    object-fit:cover;


}





/* =========================================================
   OPTION TEXT
========================================================= */


.service-yearbook-selector-option-text {


    flex:1;


}



.service-yearbook-selector-option-title {


    font-size:1rem;


    font-weight:600;


    color:#04034e;


}



.service-yearbook-selector-option-description {


    margin-top:5px;


    font-size:.9rem;


    color:#6c757d;


    line-height:1.4;


}

/* =========================================================
   YEARBOOK CATEGORY
========================================================= */


.service-yearbook-category {


    width:100%;


    margin-bottom:35px;


}



.service-yearbook-category-title {


    margin-bottom:15px;


}



.service-yearbook-category-title h3 {


    margin:0;


    font-size:1.25rem;


    font-weight:600;


    color:#04034e;


}





/* =========================================================
   YEARBOOK FIELDS
========================================================= */


.service-yearbook-field {


    display:flex;


    flex-direction:column;


    width:100%;


    min-width:0;


}



.service-yearbook-field label {


    display:block;


    margin-bottom:8px;


    font-weight:600;


    color:#333;


}




.service-yearbook-input {


    width:100%;


    box-sizing:border-box;


    padding:12px 14px;


    border:1px solid #ccc;


    border-radius:6px;


    background:#ffffff !important;


    font-family:inherit;


    font-size:15px;


    line-height:1.4;


    outline:none;


    transition:


        border-color .2s ease,


        box-shadow .2s ease;


}




.service-yearbook-input:hover,
.service-yearbook-input:focus {


    border-color:#888;


    box-shadow:

        0 0 0 3px rgba(0,0,0,.08);


}



.service-yearbook-quantity-input {


    width:100%;


    padding:12px 14px;


    border:1px solid #ccc !important;


    border-radius:6px;


    background:#ffffff !important;


    font-size:15px;


}





/* =========================================================
   MULTICHECK
========================================================= */


.service-yearbook-multicheck-category {


    width:100%;


    margin-bottom:35px;


}




.service-yearbook-multicheck-title {


    margin-bottom:15px;


}



.service-yearbook-multicheck-title h3 {


    margin:0;


    font-size:1.25rem;


    color:#04034e;


}




.service-yearbook-multicheck-options {


    display:flex;


    flex-direction:column;


    gap:15px;


}





.service-yearbook-multicheck-option {


    width:100%;


}





.service-yearbook-multicheck-label {


    display:flex;


    align-items:flex-start;


    gap:12px;


    cursor:pointer;


}




.service-yearbook-multicheck-input {


    position:absolute;


    opacity:0;


}



.service-yearbook-multicheck-checkmark {


    width:20px;


    height:20px;


    border:2px solid #135f84;


    border-radius:4px;


    flex-shrink:0;


    margin-top:2px;


    position:relative;


}





.service-yearbook-multicheck-input:checked 
+ .service-yearbook-multicheck-checkmark {


    background:#135f84;


}





.service-yearbook-multicheck-input:checked 
+ .service-yearbook-multicheck-checkmark::after {


    content:"";


    position:absolute;


    left:5px;


    top:1px;


    width:6px;


    height:12px;


    border:


        solid #fff;


    border-width:


        0 2px 2px 0;


    transform:rotate(45deg);


}





.service-yearbook-multicheck-text {


    flex:1;


    color:#333;


    font-size:.95rem;


}





.service-yearbook-multicheck-description {


    display:block;


    margin-top:5px;


    font-size:.85rem;


    color:#6c757d;


}





/* =========================================================
   QUANTITY AND CUSTOM INPUTS
========================================================= */


.service-yearbook-multicheck-quantity {


    margin:

        12px 0 0 32px;


}



.service-yearbook-multicheck-quantity label {


    display:block;


    margin-bottom:5px;


    font-weight:600;


}

.service-yearbook-multicheck-quantity-input,
.service-yearbook-multicheck-custom-input {


    width:100%;


    padding:10px 12px;


    border:1px solid #ccc;


    border-radius:6px;


    background:#ffffff !important;


}

/* =========================================================
   MULTICHECK GROUPS
========================================================= */


.service-yearbook-multicheck-groups {


    display:flex;


    flex-direction:column;


    gap:25px;


}



.service-yearbook-multicheck-group {


    width:100%;


}



.service-yearbook-multicheck-group-title {


    margin-bottom:12px;


    font-weight:600;


    color:#04034e;


}



.service-yearbook-multicheck-group-options {


    display:flex;


    flex-direction:column;


    gap:12px;


}





/* =========================================================
   YEARBOOK FOOTER
========================================================= */


.service-yearbook-popup-footer {


    display:flex;


    justify-content:flex-end;


    align-items:center;


    gap:12px;


    padding:20px 24px;


    border-top:1px solid #e5e7eb;


    background:#ffffff;


    box-sizing:border-box;


}





/* =========================================================
   YEARBOOK BUTTONS
========================================================= */


.service-yearbook-button {


    display:inline-flex;


    justify-content:center;


    align-items:center;


    min-width:160px;


    height:46px;


    padding:0 22px;


    border-radius:10px;


    border:none;


    font-size:.95rem;


    font-weight:600;


    cursor:pointer;


    transition:all .25s ease;


    text-decoration:none;


    white-space:nowrap;


    box-sizing:border-box;


}



.service-yearbook-button-primary,
.service-yearbook-button-secondary {


    background:#135f84;


    color:#ffffff;


    box-shadow:


        0 8px 18px rgba(13,110,253,.25);


}



.service-yearbook-button-primary:hover,
.service-yearbook-button-secondary:hover {


    transform:translateY(-2px);


}

/*=========================================================
  RESPONSIVE - 1200px
=========================================================*/
@media (max-width:1200px){

    .service-yearbook-popup-container{
        width:min(960px,96vw);
        height:94vh;
    }

    .service-yearbook-popup-header{
        padding:18px 20px;
    }

    .service-yearbook-popup-body{
        padding:20px;
    }

    .service-yearbook-institution-fields{
        grid-template-columns:repeat(2,1fr);
        gap:18px;
    }

    .service-yearbook-selector-image{
        width:90px;
        height:90px;
    }

    .service-yearbook-selector-option-image{
        width:72px;
        height:72px;
    }

}


/*=========================================================
  RESPONSIVE - 900px
=========================================================*/
@media (max-width:900px){

    .service-yearbook-popup-container{
        width:96vw;
        height:95vh;
        border-radius:12px;
    }

    .service-yearbook-popup-header{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
        padding:18px;
    }

    .service-yearbook-popup-close{
        position:absolute;
        top:16px;
        right:16px;
    }

    .service-yearbook-popup-body{
        padding:18px;
    }

    .service-yearbook-institution-fields{
        grid-template-columns:1fr;
        gap:16px;
    }

    .service-yearbook-selector-selected{
        gap:15px;
        padding:12px;
    }

    .service-yearbook-selector-image{
        width:80px;
        height:80px;
    }

    .service-yearbook-selector-option-image{
        width:64px;
        height:64px;
    }

    .service-yearbook-popup-footer{
        padding:16px 18px;
        flex-wrap:wrap;
    }

    .service-yearbook-button{
        flex:1;
        min-width:180px;
    }

}


/*=========================================================
  RESPONSIVE - 600px
=========================================================*/
@media (max-width:600px){

    .service-yearbook-popup-overlay{
        padding:8px;
    }

    .service-yearbook-popup-container{
        width:100%;
        height:100%;
        max-height:100%;
        border-radius:0;
    }

    .service-yearbook-popup-header{
        padding:16px;
    }

    .service-yearbook-popup-title{
        font-size:1.35rem;
        line-height:1.2;
        padding-right:40px;
    }

    .service-yearbook-popup-description{
        font-size:.92rem;
    }

    .service-yearbook-popup-body{
        padding:16px;
    }

    .service-yearbook-selector-selected{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
    }

    .service-yearbook-selector-image{
        width:100%;
        height:180px;
    }

    .service-yearbook-selector-option{
        align-items:flex-start;
    }

    .service-yearbook-selector-option-image{
        width:58px;
        height:58px;
    }

    .service-yearbook-category{
        margin-bottom:28px;
    }

    .service-yearbook-category-title h3,
    .service-yearbook-multicheck-title h3{
        font-size:1.1rem;
    }

    .service-yearbook-popup-footer{
        flex-direction:column;
        gap:10px;
        padding:14px 16px;
    }

    .service-yearbook-button{
        width:100%;
        min-width:100%;
    }

    .service-yearbook-multicheck-quantity{
        margin-left:0;
    }

}