/* 
	Plugin Name: Voipir
	Author: Keremiya
	Author URI: https://www.keremiya.com
*/

/* Beyaz Arkaplan Uyumlu Template Ayari */
/* Bu ayarlar ile ozel template yapabilirsiniz. 
   Bu kodlari kopyalayin ve Eklenti Paneli > Diger Ayarlar > OZEL CSS ayarina ekleyin.
   Ardindan white yazan alana yeni-template (istediginiz isim) yazin.
   Duzenlemeye baslayin.
   Kısa kodda yer alan template="" alanina "yeni-template (istediginiz isim)" yazin.
   Kullanmaya baslayin.
*/

.voipir-inter-rates.white {
    background: #fff;
    box-shadow: 0 50px 100px -20px rgb(72 50 93 / 14%), 0 30px 60px -30px rgb(156 11 204 / 19%), 0 -18px 60px -10px rgb(0 0 0 / 3%);
}
.voipir-inter-rates.white h4 {
    color: #ff6868;
    text-shadow: none;
}
/* Landline & Mobile kutucugu */
.voipir-inter-rates.white .voipir-bar-item {
    border: 1px solid #b9b9b9;
}
/* View all International rates basligi */
.voipir-inter-rates.white .view-all-rates {
    color: #444;
}
/* A-Z Harfler */
.voipir-inter-rates.white .voipir-letters {
    color: #2f2f2f;
}
/* Ulke listeme ust kisim */
.voipir-inter-rates.white .voipir-countries-head-item {
    border-top: 1px solid #d8d8d8;
    color: #9c9c9c;
}
/* Ulke listemedeki ulkeler */
.voipir-inter-rates.white .voipir-countries-item {
    color: #2b2b2b;
}
/* Ulke listemedeki ulkeler 2. arkaplan */
.voipir-inter-rates.white .voipir-countries-item:nth-child(odd) {
    background: #f6edff;
}

/* Slider Basligi */
.voipir-popular-questions.white h4 {
    color: #ff6868;
}

/* Slider elemanlarinin css degerleri */
.voipir-popular-questions.white a.question-item {
    background: #f5f5f5;
    color: #777;
}

/* Slider aktif elemanlarinin css degerleri */
.voipir-popular-questions.white .slick-current a.question-item,
.voipir-popular-questions.white .prev_slide a.question-item {
    background: linear-gradient(115deg,#f7d96a 15%,#fff295 70%,#f7ff83 94%);
    color: #222;
}


/* Voipir Rates */

#international-rates {
    padding-top: 80px;
}

.voipir-inter-rates {
    padding: 70px 60px;
    max-width: 760px;
    margin: 0 auto;
    border-radius: 2px;
    text-align: center;
}

.voipir-inter-rates h4 {
    margin-bottom: 40px;
    color: #fff;
    font-size: 28px;
    font-weight: bold;
}

.voipir-select {
    width: 300px;
    position: relative;
    display: inline-block;
}
.voipir-select input {
    width: 100%;
    height: 48px;
    background: #fff;
    background-color: #fff;
    border: 1px solid #622590;
    border-radius: 4px;
    font-size: 16px;
    padding: 0 30px 0 16px;

    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI1IiB2aWV3Qm94PSIwIDAgOCA1IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMSAxTDQgNEw3IDEiIHN0cm9rZT0iIzY3ODFDNyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=);
    background-repeat: no-repeat;
    background-position: calc(100% - 12px) 50%;
    background-size: 12px 10px;
    padding-right: 43px;
}

.voipir-bar {
    position: relative;
    display: block;

    margin-top: 70px;
    display: flex;
}

.voipir-bar-item {
    flex: 50%;
    background: #fff;
    padding: 10px 0px;
    border-radius: 4px;
    box-shadow: 0px 3px 3px rgb(0 0 0 / 4%);
}
.voipir-bar-item:first-child {
    margin-right: 40px;
}

.voipir-bar-item .rate {
    font-size: 36px;
}
.voipir-bar-item .landline, .voipir-bar-item .mobile {
    display: block;
}

.voipir-bar-item .cur {
    font-size: 14px;
    margin-left: 3px;
}


/* ALL RATES */


.voipir-all-international-rates {
    position: relative;
    display: none;
    padding-top: 40px;
    margin: 0px -60px;
    font-size: 14px;
}
.voipir-all-international-rates.active {
    display: block;
}
.voipir-all-international-rates.process:after {
    top: 100px;
}
.voipir-all-international-rates.process:before {
    background: rgb(255 255 255 / 14%);
}


.view-all-rates {
    text-align: center;
    font-size: 18px;
    margin: 40px 40px 0px;
    color: #fff; /* View all International rates text font rengi */
}

.view-all-rates span {
    text-decoration: underline;
    cursor: pointer;
}
.view-all-rates span:hover {
    text-decoration: none;
}


.voipir-letters {
    text-align: center;
    font-size: 18px;
    margin: 0px 0 27px;
    padding: 0 20px;
    color: #fff; /* A-Z Harfler text font rengi */
}
.voipir-letters span {
    display: inline-block;
    vertical-align: baseline;
    padding: 0 5px;
    cursor: pointer;
}
.voipir-letters span.active {
    font-size: 30px;
}


.voipir-countries-head-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 50px;
    text-align: left;
    border-top: 1px solid rgb(255 255 255 / 54%); /* Country - Type - Rate Metinleri Border */
    color: rgb(255 255 255 / 75%); /* Country - Type - Rate Metinleri font rengi */
}

.voipir-countries-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 50px;
    text-align: left;
    color: #fff; /* ulke listemesindeki font color rengi */
}

.voipir-countries-item:nth-child(odd) {
    background: #f6edff; /* Ulke listemesindeki 1. ve her 2den sonra 1. ulkenin background rengi */
}


.voipir-countries-item > span.item-country-name , .voipir-countries-head-item > span.item-country-name {
    flex: 30%;
    max-width: 30%;
}
.voipir-countries-item > span.item-type , .voipir-countries-head-item > span.item-type {
    flex: 20%;
    max-width: 20%;
}
.voipir-countries-item > span.item-code , .voipir-countries-head-item > span.item-code {
    flex: 40%;
    max-width: 40%;
}

.voipir-countries-item .item-rate, .voipir-countries-head-item .item-rate{
    text-align: right;
    flex: 10%;
    max-width: 10%;
}

.voipir-countries-item .item-rate span:first-child, .voipir-countries-item .item-type span:first-child, .voipir-countries-item .item-code span:first-child {
    display: block;
    margin-bottom: 15px;
}


/* QUESTIONS */

.voipir-popular-questions {
    padding: 50px 0px;
}

.voipir-popular-questions h4 {
    text-align: center;
    color: #ff6868;
    margin-bottom: 30px;
    font-size: 28px;
    font-weight: bold;
}

.voipir-popular-questions-slider {
    display: none;
}

.voipir-popular-questions-slider * {
    outline: none!important;
}
.voipir-popular-questions-slider .item {
    padding: 15px 8px;
    -webkit-perspective: 500px;
    perspective: 500px;
}

.voipir-slider:before, .voipir-slider:after {
    position: absolute;
    top: 0;
    content: ' ';
    background-color: #ececec;
    width: 10vw;
    height: 100%;
    z-index: 10;
    cursor: no-drop;
}
.voipir-slider:before {
    left: -10px;
    background: linear-gradient(to right,#fff 0,rgb(237 237 237 / 0) 50%,rgba(255,255,255,0) 100%);
}
.voipir-slider:after {
    background: linear-gradient(to right,rgba(254,255,255,0) 0,rgb(236 236 236 / 0) 50%,#fff 100%);
    right: -10px;
}



a.question-item {
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 100px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 15px;
    margin: 15px 0px;
    background: #f5f5f5;
    border-radius: 4px;
    color: #777;
    line-height: 18px;
    -webkit-box-shadow: -4px 6px 12px rgba(0,0,0,.12);
    box-shadow: -4px 6px 12px rgba(0,0,0,.12);
    -webkit-transition: all 1.5s;
    -o-transition: all 1.5s;
    transition: all 1.5s;
    text-decoration: none;
    -webkit-transform: rotateY(-15deg) translateZ(0);
    transform: rotateY(-15deg) translateZ(0);
}

.question-text {
    display: none;
}

.slick-current a.question-item, .prev_slide a.question-item {
    background: #ffa800;
    color: #fff;
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
}


/***********************
*** BIG POPUP       ****
***********************/

.modal {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999999;
    overflow-y: scroll;
    font-size: 13px;
}

.modal-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;

    background-color: transparent;
    background-image: linear-gradient(to bottom, rgb(6 6 6 / 42%) 0%, rgb(6 6 6 / 35%) 75%, rgb(0 0 0 / 38%) 100%);
}
.modal-inner {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    
    width: 470px;
    border-radius: 2px;
    margin-left: -235px;
    overflow: hidden;

    background: #ffffff;
    box-shadow: 0 4px 80px 6px rgb(0 0 0 / 62%);
    color: #333;
}

.modal-hide {
    position: absolute;
    right: 0px;
    top: 0px;
    font-size: 28px;
    cursor: pointer;
    padding: 14px 20px;
    color: #777;
}

.modal-question {
    padding: 28px 38px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    color: #ff6868;
}
.modal-answer {
    padding: 10px 38px 30px;
    font-size: 15px;
    font-weight: normal;
    text-align: left;
}

/* PROCESS */
.process {
    overflow: hidden;
}
.process:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgb(255 255 255 / 82%);
    z-index: 10;
}

.process:after {
    left: 50%;
    margin: -14px 0 0 -14px;
    position: absolute;
    top: 50%;
    z-index: 11;
    content: '';
    border: 3px solid #ffffff;
    border-top: 3px solid #622590;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#international-rates.rates-section {
    padding: 0;
    margin-top: -60px;
    margin-bottom: 100px;
}

/* Select UI */
.ui-autocomplete {
    position: absolute;
    top: 0;
    left: 0;
    cursor: default;
    width: 300px;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}
.ui-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
    outline: 0;
}

.ui-menu .ui-menu {
    position: absolute;
}
.ui-menu .ui-menu-item {
    margin: 0;
    cursor: pointer;
    /* support: IE10, see #8844 */
    list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
}
.ui-menu .ui-menu-item-wrapper {
    position: relative;
    padding: 8px 15px 8px;
}
.ui-menu .ui-menu-divider {
    margin: 5px 0;
    height: 0;
    font-size: 0;
    line-height: 0;
    border-width: 1px 0 0 0;
}
.ui-menu .ui-state-focus,
.ui-menu .ui-state-active {
    margin: -1px;
}
.ui-state-active:hover {
    border: 1px solid #622590;
    background: #622590;
    font-weight: normal;
    color: #ffffff;
}
.ui-front {
    z-index: 100;
}
.ui-widget.ui-widget-content {
    border: 1px solid #c5c5c5;
}
.ui-widget-content {
    border: 1px solid #dddddd;
    background: #ffffff;
    color: #333333;
    font-size: 15px;
}
.ui-widget-content a {
    color: #333333;
}

/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}


.scale-up-center {
    -webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
            animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
.scale-down-center {
    -webkit-animation: scale-down-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            animation: scale-down-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.slide-bottom {
    -webkit-animation: slide-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            animation: slide-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.slide-top {
    -webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
            opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 1;
  }
}
@keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
            opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 1;
  }
}

@-webkit-keyframes scale-down-center {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
}
@keyframes scale-down-center {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
}
@-webkit-keyframes slide-bottom {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(200px);
            transform: translateY(200px);
  }
}
@keyframes slide-bottom {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(200px);
            transform: translateY(200px);
  }
}
@-webkit-keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
            opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-200px);
            transform: translateY(-200px);
            opacity: 0;
  }
}
@keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
            opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-200px);
            transform: translateY(-200px);
            opacity: 0;
  }
}


/* DESTINATIONS */

.destination-wrap {
    background: #fff;
    padding: 45px 50px;
    box-shadow: 0 50px 100px -20px rgb(50 50 93 / 25%), 0 30px 60px -30px rgb(0 0 0 / 30%), 0 -18px 60px -10px rgb(0 0 0 / 3%);
}

.destination-wrap .body-text {
    padding-top: 15px;
    margin-bottom: 30px;
}

.destination-wrap .more {
    margin-top: 20px;
}

.destination-wrap .row {
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
    column-gap: 1.8rem;
}
.destination-wrap .col-2 {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}
.destination {
    border-bottom: 1px solid #dddfe2;
    padding-bottom: 8px;
    padding-top: 8px;
    display: flex;
    align-items: center;
}
.destination:last-child {
    border-bottom: 0;
}

.destination .country-name {
    flex-grow:1;
}

#destination-popup .voipir-all-international-rates {
    display: block;
    padding-top: 1px;
}

#destination-popup .view-all-rates {
    display: none;
}

#destination-popup .modal-inner {
    width: 700px;
    margin-left: -350px;
    top: 10%;

}

#destination-popup .modal-bg {
    right: 16px;
}

.country-icon {
    display: inline-block;
    width: 24px;
    height: 18px;
    margin-top: 1px;
    margin-right: 6px;
    background-repeat: no-repeat;
    background-size: 24px 18px;
    border-radius: 2px;
}