/* assets/css/pretvornik-valut.css */

#pv-converter-container.pv-container {
    max-width: 600px;
    margin: 20px auto;
}

#pv-top-row.pv-top-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

#pv-input-col.pv-input-col,
#pv-result-col.pv-result-col {
    width: 48%;
    display: flex;
    align-items: center;
}

.pv-label {
    flex-basis: 100%;
    margin-bottom: 4px;
    font-size: 1rem;
}

.pv-input,
.pv-output {
    width: calc(100% - 90px);
    padding: 10px 20px!important;
    font-size: 1.2rem;
    border: 1px solid #ccc;
    border-radius: 4px 0 0 4px!important;
	height:50px!important;
	background:#ffffff!important;
}

.pv-select {
    width: 80px;
    padding: 10px!important;
    font-size: 1.2rem;
    border-left: none;
    border-radius: 0 4px 4px 0;
	background:#f7f8f9!important;
}

#pv-date-picker-wrapper.pv-date-picker-wrapper {
    text-align: center;
    margin-top: 50px;
}

.pv-date-picker {
    padding: 10px 15px;
    font-size: 1.2rem;
    width: 180px;
    border: 1px solid #ccc;
    border-radius: 4px!important;
	background:#e7e8e9!important;
}

#pv-rates-table.pv-rates-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.2rem;
    margin-top: 20px;
}

#pv-rates-table.pv-rates-table th {
    text-align: left;
    padding: 8px;
    background-color: #efefef;
}

#pv-rates-table.pv-rates-table td {
    padding: 8px;
}

#pv-rates-table.pv-rates-table tr.pv-alt-row {
    background-color: #f7f8f9;
}

/* Ensure the datepicker dropdown is opaque and styled */
.ui-datepicker {
  background: #fff !important;
  border: 1px solid #ccc !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
  border-radius:7px;
  padding:10px;
}

.ui-datepicker-header {
  background: #f0f0f0 !important;
  border-bottom: 1px solid #ddd !important;
  padding:10px 10px 0;
}

.ui-datepicker-calendar td a {
  background: none !important;
}

.ui-datepicker .ui-datepicker-header {
  position: relative;
}

.ui-datepicker .ui-datepicker-prev {
  float: left !important;
  left: 0.5em;
}

.ui-datepicker .ui-datepicker-next {
  float: right !important;
  right: 0.5em;
}

.ui-datepicker .ui-datepicker-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0; 
}