/* =========================================================
   PREMIUM GOLD RATE TOP BAR
   ========================================================= */

.top-info-bar {
    width: 100%;

    background: #17120d;

    color: #ffffff;

    border-bottom: 1px solid #9a7627;

    overflow: hidden;
}


/* =========================================================
   MAIN TOP BAR CONTAINER
   ========================================================= */

.top-info-inner {
    width: 100%;

    max-width: 1500px;

    min-height: 44px;

    margin: 0 auto;

    padding: 0 25px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    white-space: nowrap;
}


/* =========================================================
   CONTACT SECTION
   ========================================================= */

.contact-info {
    display: flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;

    white-space: nowrap;
}


/* Contact links */

.top-link {
    display: inline-flex;

    align-items: center;

    color: #ffffff;

    text-decoration: none;

    font-size: 12px;

    font-weight: 400;

    letter-spacing: 0.2px;

    white-space: nowrap;

    transition: color 0.2s ease;
}


.top-link:hover {
    color: #d4af37;

    text-decoration: none;
}


/* Contact icons */

.top-icon {
    color: #d4af37;

    font-size: 13px;

    margin-right: 6px;

    line-height: 1;
}

/* Crisp SVG contact icons - avoids font/encoding issues on older ASP.NET pages */
.top-icon-svg {
    width: 15px;
    height: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 15px;
}

.top-icon-svg svg {
    width: 15px;
    height: 15px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* Separator */

.top-separator {
    color: #5d4d35;

    font-size: 12px;
}


/* =========================================================
   ONLINE GOLD RATES
   ========================================================= */

.online-rates {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 28px;

    flex-shrink: 0;

    white-space: nowrap;
}


/* Individual rate */

.rate-item {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    position: relative;

    white-space: nowrap;

    font-size: 12px;
}


/* Rate description */

.rate-label {
    color: #d5bb7b;

    font-weight: 400;

    white-space: nowrap;
}


/* Actual price */

.rate-value {
    color: #ffffff;

    font-weight: 700;

    white-space: nowrap;
}


/* =========================================================
   SEPARATOR BETWEEN RATES
   ========================================================= */

.rate-item + .rate-item {
    position: relative;
}


.rate-item + .rate-item:before {
    content: "";

    position: absolute;

    left: -15px;

    top: 50%;

    transform: translateY(-50%);

    width: 1px;

    height: 15px;

    background: #4c402d;
}


/* =========================================================
   RATE UPDATED
   ========================================================= */

.rate-updated-item .rate-label {
    color: #999999;
}


.rate-updated-item .rate-value {
    color: #d4af37;

    font-weight: 600;
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media screen and (min-width: 1201px) {

    .top-info-inner {
        min-height: 44px;

        padding-left: 30px;

        padding-right: 30px;
    }


    .online-rates {
        gap: 28px;
    }


    .rate-item {
        font-size: 12px;
    }

}


/* =========================================================
   LAPTOP
   ========================================================= */

@media screen and (max-width: 1200px) {

    .top-info-inner {
        padding-left: 15px;

        padding-right: 15px;

        gap: 20px;
    }


    .online-rates {
        gap: 20px;
    }


    .rate-item {
        font-size: 11px;
    }


    .top-link {
        font-size: 11px;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 1024px) {

    /*
       Horizontal scrolling is enabled.

       The bar will NOT wrap into multiple rows.
    */

    .top-info-inner {
        justify-content: flex-start;

        overflow-x: auto;

        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;

        gap: 25px;
    }


    /* Hide Chrome scrollbar */

    .top-info-inner::-webkit-scrollbar {
        display: none;
    }


    .contact-info {
        flex-shrink: 0;
    }


    .online-rates {
        flex-shrink: 0;

        justify-content: flex-start;

        gap: 22px;
    }


    .rate-item {
        flex-shrink: 0;
    }

}


/* =========================================================
   MOBILE / TABLET
   ========================================================= */

@media screen and (max-width: 767px) {

    .top-info-inner {
        min-height: 40px;

        padding-left: 12px;

        padding-right: 12px;

        gap: 20px;
    }


    .contact-info {
        gap: 9px;
    }


    .top-link {
        font-size: 10px;
    }


    .top-icon {
        font-size: 12px;
        margin-right: 4px;
    }

    .top-icon-svg,
    .top-icon-svg svg {
        width: 13px;
        height: 13px;
    }

    .top-icon-svg {
        flex-basis: 13px;
    }


    .online-rates {
        gap: 20px;
    }


    .rate-item {
        font-size: 10px;
    }


    .rate-item + .rate-item:before {
        left: -10px;

        height: 12px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 599px) {

    .top-info-inner {
        min-height: 38px;

        padding-left: 10px;

        padding-right: 10px;

        gap: 18px;
    }


    .top-link {
        font-size: 10px;
    }


    .online-rates {
        gap: 18px;
    }


    .rate-item {
        font-size: 10px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media screen and (max-width: 479px) {

    .top-info-inner {
        min-height: 36px;

        padding-left: 8px;

        padding-right: 8px;

        gap: 16px;
    }


    .top-link {
        font-size: 9px;
    }


    .top-icon {
        font-size: 11px;
    }

    .top-icon-svg,
    .top-icon-svg svg {
        width: 12px;
        height: 12px;
    }

    .top-icon-svg {
        flex-basis: 12px;
    }


    .online-rates {
        gap: 16px;
    }


    .rate-item {
        font-size: 9px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media screen and (max-width: 379px) {

    .top-info-inner {
        padding-left: 7px;

        padding-right: 7px;

        gap: 14px;
    }


    .top-link {
        font-size: 9px;
    }


    .online-rates {
        gap: 14px;
    }


    .rate-item {
        font-size: 9px;
    }

}

/************************************************************************************** NOOPURA LOGO****************************************************************/

/* =========================================================
   NOOPURA LOGO
   ========================================================= */

.logo{
    display:flex;
    align-items:center;

    width:285px;
    height:78px;

    overflow:hidden;

    text-decoration:none;

    flex-shrink:0;

    position:relative;
}


/* =========================================================
   LOGO IMAGE CONTAINER

   The original logo image is square and contains a lot
   of white space. This wrapper prevents that white space
   from making the header unnecessarily large.
   ========================================================= */

.logo-image-wrap{
    display:flex;

    align-items:center;
    justify-content:flex-start;

    width:275px;
    height:76px;

    overflow:hidden;

    position:relative;
}


/* =========================================================
   ACTUAL LOGO

   The image is square, therefore we enlarge it and move
   it slightly so the useful Noopura artwork fills the
   header area.
   ========================================================= */

.logo-image{
    display:block;

    width:190px;
    height:190px;

    max-width:none;

    object-fit:contain;

    position:absolute;

    left:-5px;
    top:-56px;
}


/* =========================================================
   HEADER LAYOUT
   ========================================================= */

.headrow{
    display:flex;

    align-items:center;

    min-height:78px;

    padding:0 72px;

    gap:25px;
}


/* =========================================================
   SEARCH AREA

   Keep search in the centre instead of allowing the logo
   to push it too far to the right.
   ========================================================= */

.search{
    flex:1;

    max-width:530px;

    margin-left:auto;
    margin-right:auto;

    display:flex;

    align-items:center;
}


/* =========================================================
   SEARCH TEXTBOX
   ========================================================= */

.search input[type="text"],
.searchBox{
    height:44px;

    box-sizing:border-box;

    flex:1;

    border:1px solid #ddd;

    padding:0 13px;

    font-size:14px;

    outline:none;

    color:#4a3a2d;

    background:#fff;
}


.search input[type="text"]:focus,
.searchBox:focus{
    border-color:#b18a4a;
}


/* =========================================================
   SEARCH BUTTON
   ========================================================= */

.search input[type="submit"],
.searchButton{
    height:44px;

    min-width:108px;

    border:0;

    background:#a47c3c;

    color:#fff;

    font-size:14px;

    cursor:pointer;

    transition:
        background .2s ease;
}


.search input[type="submit"]:hover,
.searchButton:hover{
    background:#8d682f;
}


/* =========================================================
   ACCOUNT / WISHLIST / CART
   ========================================================= */

.headlinks{
    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:18px;

    min-width:175px;

    white-space:nowrap;
}


.headlinks a{
    color:#4a2f1f;

    text-decoration:none;

    font-size:13px;

    transition:
        color .2s ease;
}


.headlinks a:hover{
    color:#a47c3c;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1100px){

    .headrow{
        padding-left:35px;
        padding-right:35px;

        gap:18px;
    }


    .logo{
        width:230px;
    }


    .logo-image-wrap{
        width:225px;
    }


    .logo-image{
        width:170px;
        height:170px;

        left:-5px;
        top:-49px;
    }


    .search{
        max-width:480px;
    }


    .headlinks{
        min-width:145px;

        gap:13px;
    }

}


/* =========================================================
   900px
   ========================================================= */

@media (max-width:900px){

    .headrow{
        min-height:75px;

        padding-left:20px;
        padding-right:20px;

        gap:12px;
    }


    .logo{
        width:205px;
        height:70px;
    }


    .logo-image-wrap{
        width:200px;
        height:70px;
    }


    .logo-image{
        width:155px;
        height:155px;

        left:-4px;
        top:-45px;
    }


    .search{
        max-width:none;
    }


    .headlinks{
        min-width:auto;

        gap:12px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:600px){

    .headrow{
        display:grid;

        grid-template-columns:
            1fr auto;

        grid-template-rows:
            65px 45px;

        padding:
            5px 12px 8px;

        gap:5px 10px;
    }


    .logo{
        width:190px;

        height:60px;

        grid-column:1;

        grid-row:1;
    }


    .logo-image-wrap{
        width:185px;

        height:60px;
    }


    .logo-image{
        width:135px;
        height:135px;

        left:-3px;
        top:-38px;
    }


    .headlinks{
        grid-column:2;

        grid-row:1;

        min-width:auto;

        gap:10px;
    }


    .headlinks a{
        font-size:0;
    }


    .headlinks a:first-child{
        font-size:0;
    }


    .headlinks a:first-child:before{
        content:"👤";

        font-size:19px;
    }


    .headlinks a:nth-child(2){
        font-size:20px;
    }


    .headlinks a:nth-child(3){
        font-size:18px;
    }


    .search{
        grid-column:1 / 3;

        grid-row:2;

        width:100%;

        max-width:none;

        margin:0;
    }


    .search input[type="text"],
    .searchBox{
        height:40px;

        font-size:13px;
    }


    .search input[type="submit"],
    .searchButton{
        height:40px;

        min-width:80px;

        font-size:12px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width:380px){

    .headrow{
        padding-left:8px;
        padding-right:8px;
    }


    .logo{
        width:170px;
    }


    .logo-image-wrap{
        width:165px;
    }


    .logo-image{
        width:125px;
        height:125px;

        top:-34px;
    }


    .headlinks{
        gap:7px;
    }

}
/* =========================================================
   NOOPURA HEADER ACTIONS
   Elegant line icons matching the gold / brown theme.
   ========================================================= */

.headlinks{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:14px;
    min-width:360px;
    white-space:nowrap;
}

.head-action{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-width:52px;
    color:#4a2f1f !important;
    text-decoration:none;
    font-size:10px !important;
    letter-spacing:.2px;
    line-height:1.1;
    transition:color .2s ease, transform .2s ease;
}

.head-action:hover{
    color:#a47c3c !important;
    transform:translateY(-1px);
}

.head-icon{
    width:25px;
    height:25px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.head-icon svg{
    width:23px;
    height:23px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.55;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.head-label{
    display:block;
}

@media (max-width:1200px){
    .headlinks{
        min-width:330px;
        gap:9px;
    }
    .head-action{
        min-width:47px;
        font-size:9px !important;
    }
    .head-icon,.head-icon svg{
        width:22px;
        height:22px;
    }
}

@media (max-width:900px){
    .headlinks{
        min-width:245px;
        gap:7px;
    }
    .head-action{
        min-width:38px;
        font-size:0 !important;
    }
    .head-icon,.head-icon svg{
        width:24px;
        height:24px;
    }
}

@media (max-width:600px){
    .headlinks{
        min-width:auto;
        gap:8px;
    }
    .head-action{
        min-width:25px;
    }
    .head-icon,.head-icon svg{
        width:22px;
        height:22px;
    }
}

@media (max-width:600px){
    .headlinks a:first-child:before,
    .headlinks a:nth-child(2):before,
    .headlinks a:nth-child(3):before{
        content:none !important;
        display:none !important;
    }
}


/* =========================================================
   RESPONSIVE HEADER FIX - ICONS + SEARCH
   Keeps all 5 quick-action icons visible on narrow screens
   and makes the search field/button fit the viewport.
   ========================================================= */

@media (max-width: 900px){
    .headrow{
        grid-template-columns:minmax(0,1fr) auto;
    }

    .logo{
        min-width:0;
        width:auto;
        max-width:100%;
    }

    .logo-image-wrap{
        width:100%;
        max-width:100%;
    }

    .headlinks{
        min-width:0 !important;
        width:auto;
        flex-shrink:0;
        gap:8px;
    }

    .head-action{
        flex:0 0 auto;
    }

    .search{
        min-width:0;
    }

    .search input[type="text"],
    .searchBox{
        min-width:0 !important;
        width:100%;
    }

    .search input[type="submit"],
    .searchButton{
        flex:0 0 78px;
        min-width:78px;
    }
}

@media (max-width: 600px){
    .headrow{
        grid-template-columns:minmax(0,1fr) auto;
        grid-template-rows:58px 42px;
        padding:4px 10px 7px;
        gap:4px 7px;
    }

    .logo{
        width:auto !important;
        height:58px;
    }

    .logo-image-wrap{
        width:100% !important;
        height:58px;
    }

    .logo-image{
        width:130px;
        height:130px;
        left:-3px;
        top:-36px;
    }

    .headlinks{
        gap:6px !important;
    }

    .head-action{
        min-width:20px !important;
        width:20px;
        padding:0;
    }

    .head-icon,
    .head-icon svg{
        width:20px;
        height:20px;
    }

    .head-label{
        display:none;
    }

    .search{
        width:100%;
        min-width:0;
    }

    .search input[type="text"],
    .searchBox{
        height:40px;
        padding:0 9px;
        font-size:12px;
    }

    .search input[type="submit"],
    .searchButton{
        height:40px;
        flex:0 0 68px;
        min-width:68px;
        padding:0 5px;
        font-size:10px;
    }
}

@media (max-width: 380px){
    .headrow{
        padding-left:7px;
        padding-right:7px;
        gap:4px 5px;
    }

    .logo-image{
        width:122px;
        height:122px;
        top:-34px;
    }

    .headlinks{
        gap:5px !important;
    }

    .head-action{
        width:19px;
        min-width:19px !important;
    }

    .head-icon,
    .head-icon svg{
        width:19px;
        height:19px;
    }

    .search input[type="text"],
    .searchBox{
        font-size:11px;
        padding-left:8px;
    }

    .search input[type="submit"],
    .searchButton{
        flex-basis:62px;
        min-width:62px;
        font-size:9px;
    }
}

@media (max-width: 330px){
    .headrow{
        padding-left:5px;
        padding-right:5px;
    }

    .logo-image{
        width:112px;
        height:112px;
        top:-31px;
    }

    .headlinks{
        gap:4px !important;
    }

    .head-action{
        width:18px;
        min-width:18px !important;
    }

    .head-icon,
    .head-icon svg{
        width:18px;
        height:18px;
    }

    .search input[type="submit"],
    .searchButton{
        flex-basis:58px;
        min-width:58px;
    }
}